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

时间:2024-04-03 22:14:02

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的函数

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

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

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

注意:刷新页面时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中拿取。