Vuex刷新后数据消失解决方法

先看vuex的的用法：

store.js

import Vue from 'vue'
import Vuex from 'vuex'
import { createVuexAlong } from 'vuex-along'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    name: "小强",
    commitName: "小刘"
  },
  mutations: {
    changeCommitName(state, data) {
      state.commitName = data
    }
  },
  actions: {
    changeName({
      state
    }, data) {
      state.name = data;
    }
  },
  plugins: [createVuexAlong({})]
})

vue代码：

这里需要知道的是，dispatch触发的是actions，commit触发的是mutation，dispatch是异步，commit是同步的

但是vuex，页面一刷新，数据就会回到初始状态，在某些功能上面，是不不符合要求的，这里介绍的是vuex-along插件，网址：https://github.com/boenfu/vuex-along

原理：

• 将vuex的state存在localStorage或sessionStorage或cookie中一份
• 刷新页面的一瞬间，vuex数据消失，vuex会去sessionStorage中哪会数据，变相的实现了数据刷新不丢失~

安装：

npm install vuex-along --save

import { createVuexAlong } from 'vuex-along'

export default new Vuex.Store({
  state:{...},
  modules:{...},
  plugins: [createVuexAlong()]
});

Now the plugins has come into effect  / 现在插件已经生效了


Save all state by default to localStorage / 默认保存所有 state 到 localStorage


You can change options to set it / 你可以通过改变 options 来改变保存内容

参考官网：https://github.com/boenfu/vuex-along  有详细的使用方法

源码：其实就是对于localStorage或sessionStorage或cookie的封装