美文网首页
第6章 vuex

第6章 vuex

作者: yangsg | 来源:发表于2020-02-02 14:17 被阅读0次

Vue不能实时监控LocalStorge中的数据,当需要在组件间共享状态时无法实现良好的效果。
Vuex是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。

1.安装

利用npm安装Vuex

npm install vuex --save

在src下新建store文件夹,并在其中新建stroe.js中显式地通过 Vue.use() 来加载Vuex

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

2.使用vuex配合路由守卫实现过滤器效果

在前置页面中添加list_view的标识,在后置页面中判断标识是否存在,如果存在就可以进入,不存在则直接将url重置为首页。
在store.js中设置本地存储标识list_view,并声明mutation:in_list完成list_view的赋值

export default new Vuex.Store({
    state: {
        list_view: ''
    },
    mutations: {
        in_list: (state, n) => {
            let list_view = JSON.parse(n);
            sessionStorage.setItem('list_view', JSON.stringify(list_view));
            state.list_view = list_view;
        }
    }
})

在前置页面的代码中添加代码

this.$store.commit('in_list',true);

在后置页面中添加beforeRouteEnter事件中处理。

beforeRouteEnter: (to,from,next) => {
    var s = JSON.parse(sessionStorage.getItem('list_view'));
    if(s){
        next();
    }else{
        next("/");
    }
}

3.vuex,sessionStorage,localStorage的区别

vuex中的数据是保存在Vue原型对象中,页面刷新时Vue原型对象会重建,vuex中数据丢失
sessionStorage中的数据保存在浏览器页面内存中(本选卡内),刷新页面不会丢失,但切换选项卡或关闭浏览器会丢失
localStorage中的数据保存在本地,时间较长,直至清除时丢失

相关文章

  • VUEX基本介绍,包含实战示例及代码(基于Vue2.X)

    VUEX 1 VUEX基本介绍 1.1 官方API 1.2 什么是vuex 1.3 Vuex使用场景 1、Vuex...

  • 【文档笔记】-Vuex

    什么是vuex? vuex文档: https://vuex.vuejs.org/zh/[https://vuex....

  • vuex配置

    vuex配置 目录 vuex的五个核心 配置vuex vuex持久化 一、vuex五个核心概念 State 定义状...

  • Vuex

    安装Vuex cnpm install vuex --save-dev Vuex是什么? 这是[Vuex的官网](...

  • Vuex

    1.Vuex概述 2.Vuex基本使用 3.使用Vuex完成todo案例 1.Vuex概述 Vuex是实现组件全局...

  • vuex

    Vuex介绍: Vuex官网:http://vuex.vuejs.org/ Vuex是实现数据状态管理的技...

  • vuex+axios 的开发流程记录

    相关文档 vuex: https://vuex.vuejs.org/zh/ 是否有必要使用vuex vuex是vu...

  • 2019-06-07

    import Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)...

  • 配置 vuex 和 vuex 本地持久化

    配置 vuex 和 vuex 本地持久化 目录 vuex是什么 vuex 的五个核心概念State 定义状态(变量...

  • vuex

    配置 vuex 和 vuex 本地持久化 目录 vuex是什么 vuex 的五个核心概念State 定义状态(变量...

网友评论

      本文标题:第6章 vuex

      本文链接:https://www.haomeiwen.com/subject/srcwuctx.html