Vuex解读及解决store中刷新后导致没有数据的问题

Vuex是一个专门为vue.js应用程序开发的状态管理模式，可以理解为共享的data，它一共有五种默认的状态：

• state：存储状态（变量）
• getters：对数据获取之前的再次编译，可以理解为state的计算属性。我们在组件中使用 $sotre.getters.fun()
• mutations：修改状态，并且是同步的。在组件中使用$store.commit('',params)。这个和我们组件中的自定义事件类似。
• actions：异步操作。在组件中使用是$store.dispath('')
• modules：store的子模块，为了开发大型项目，方便状态管理而使用的。这里我们就不解释了，用起来和上面的一样。

修改State”拆分成两部分：视图触发Action，Action再触发Mutation。

Mutation：专注于修改State，理论上是修改State的唯一途径。必须同步执行（相当于method）。

Action：业务代码、异步请求。可以异步，但不能直接操作State。（相当于created中的axios）

Store:   定义变量（相当于data）。

举例：

1、首先在store.js文件中导入相应文件，并定义好变量

import Vue from 'vue';

import Vuex from 'vuex';

import mutations from './mutations';

import actions from './actions';

Vue.use(Vuex);

export default new Vuex.Store({

    state: {

         userInfo: {}

    }

    mutations,

    actions

});

2、在mutations.js中定义修改info的函数

3、在action.js中写异步请求的函数

注意：刷新页面时vue实例会重新加载，store就会被重置，如果不是通过当前页面进行变量的修改，则刷新后是没有数据的。因此可以在定义刷新前把store存入本地localStorage、sessionStorage、cookie中，localStorage是永久储存，重新打开页面时会读取上一次打开的页面数据，sessionStorage是储存到关闭为止，cookie不适合存大量数据。可根据自己的需求选择合适的方法来解决刷新的问题，以下以sessionStorage为例：

export default new Vuex.Store({

    state:sessionStorage.getItem('state') ? JSON.parse(sessionStorage.getItem('state')) : {

        userInfo: {},

    },

    mutations,

    actions

});

即先将state数据存储在sessionStorage中，每一次获取state时就从sessionStore中拿取。