标签：world 创建 管理器 页面 method 一个 操作 value span
上一小节我们讲解了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 出来能更直观的感受罢了。下期再见~
标签：world 创建 管理器 页面 method 一个 操作 value span
原文地址：https://www.cnblogs.com/eflypro/p/13679118.html
