vuex状态管理器本地持久化

上一小节我们讲解了vuex状态管理器的基本原理和使用场景，如果自己做过demo的童鞋不难发现，在web端点击刷新按钮之后原先保存在vuex里面的数据全都被初始化了。其实不止这种情况会初始化vuex数据，当你在js代码里面执行了window.location.reload()方法后同样会初始化。下面我们来举个栗子。

1、准备工作

在安装好vuex，还没安装的童鞋可以参考上一小节去安装好vuex。

2、将store中state的name设置为helloVueX

stroe/index.js

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

//挂载Vuex
Vue.use(Vuex)

//创建VueX对象
const store = new Vuex.Store({
    state:{
        //存放的键值对就是所要管理的状态
        name:'helloVueX',
    },
    mutations: {
        // 更改name (同步)
        setName(state, newName) {
            state.name = newName;
        }
    },
    actions:{
        // 更改name (异步)
        setNameAsync(state, newName) {
            state.name = newName;
        }
    }
})

export default store

HelloWorld.vue

<template>
  <div class="hello">
    <div>
      <button @click="setValue">设置值</button>
    </div>
    <div>
      vuex中的值：{{ $store.state.name }}
    </div>
    <div>
      <button @click="reload">reload刷新</button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  methods: {
    setValue() {
      // 将store.state.name 设置为 '张三'
      this.$store.commit('setName', '张三')
    },
    reload() {
      // 刷新页面
      window.location.reload();
    }
  }
}
</script>

运行项目查看效果

 
项目初始化的时候读取了state.name的值，然后当我们点击‘设置值’按钮时，state.name的值会被设置为‘张三’，再点击‘reload’按钮或者浏览器左上角的刷新按钮时，state.name的值就会被重置。

为什么要将vuex中的数据本地持久化？

因为在实际开发或者使用过程中，难免会用到reload方法去刷新页面，这时候如果state中的数据被初始化了，其它用到这些数据的业务逻辑就会出现计算错误或判断错误，造成bug。

vuex本地持久化插件vuex-persistedstate

vuex-persistedstate插件可以帮助我们将state中的数据持久化，让我们使用起来更方便

vuex-persistedstate安装

npm i -S vuex-persistedstate

store/index.js中引用

import persistedState from 'vuex-persistedstate'
export default new Vuex.Store({
    // ...
    plugins: [persistedState()]
})

 

此时在按照上面的页面操作步骤，发现state的值在刷新页面之后也没有被重置了。

讲了那么多废话，其实就是一个插件，不过写一个demo 出来能更直观的感受罢了。下期再见~