Vuex +数据持久化(防止页面刷新数据丢失)

目录

一、什么是vuex？二、vuex五个核心属性：三、Vuex的辅助函数有四个(mapState、mapGetter、mapMutation、mapAction)四、vuex的用法五、对vuex拆分模块六、数据持久化

一、什么是vuex？

是为vue.js设计的集中式状态管理框架，vuex应用的核心就是store(仓库)。"store"本来就是一个仓库，它包含应用中大部分的状态(state),简单来说就是组件共享data中需要共同的属性。store本身就是一个对象，vue有且只有这一个对象。 vuex和单纯的全局对象有以下两点不同: 1.vuex的状态存储是响应式的。 2.不能直接改变store中的状态，改变store中的状态的唯一途径就是显示的提交((commit)mutation。

二、vuex五个核心属性：

state: Vuex store实例的根state对象getter：state的计算属性mutations:提交更新数据的方法，必须是同步的(如果需要异步使用action)。每个mutation都有一个字符串的事件类型(type)和一个回调函数(handler)。actions:和mutation的功能大致相同，不同之处在于==>1.Action提交的是mutation，而不是直接变更状态。2.Action可以包含任意异步操作。modules：模块化vuex，可以让每一个模块拥有自己的state、mutation、action、getters,使得结构非常清晰，方便管理。 尤大的回答

三、Vuex的辅助函数有四个(mapState、mapGetter、mapMutation、mapAction)

mapStatemapGettermapMutationmapAction 注意： mapState，mapGetters返回的是属性，所以混入到 computed 中， mapMutations，mapActions返回的是方法，只能混入到methods中

四、vuex的用法

cnpm i vuex --save –save(-S) 下载到dependencies(开发环境)–save-dve(-D) 下载到devDependencies(生产环境)

1.在src文件下新建store文件，引入vue,vuex，创建store实例。为了方便看，store四个属性没有分开导，这里也没有对store拆分模块。

2在mian.js引入store，并挂载 3获取state有两种方式

this.$store.state.name…mapState映射

4改state中的数据，有四种方式，commit,dispatch，mapMutations，mapActions辅助函数

1.commit mutations(直接触发mutaions)

2.使用action，(store使用dispatch通过action触发mutations)

3.使用mapMutations，mapActions辅助函数

五、对vuex拆分模块

目录结构 在外层的模块引入子模块 子模块

六、数据持久化

vuex的数据是存储在内存中，页面刷新，会丢失数据 总结了以下几种方式 1.手动利用HTML5的本地存储 localStorage或sessionStorage 2.利用vuex-persistedstate插件，原理也是运用本地缓存

npm install vuex-persistedstate --save import Vue from 'vue'; import Vuex from 'vuex'; import createPersistedState from "vuex-persistedstate" Vue.use(Vuex) const store = new Vuex.Store({ state: { name: '', password: '' }, getter: {}, mutations: { setName(state,name) { state.name = name }, }, actions: { actionsSetName(context,value) { context.commit('setName',value) } }, plugins: [createPersistedState({ storage: window.localStorage })] }) export default store js-cookie插件 下载 npm install js-cookie --save

引入

import Cookies from 'js-cookie' Cookies.set('name', 'value'，{ expires: 7, path: '' }); //7天后过期 Cookies.get('name'); //获取 Cookies.remove('name') //移除 //存对象 const user = { name: '小鹿Max', age: 18 } Cookies.set('user', user) const liaUser = JSON.parse(Cookies.get('user'))

最后，源码地址，如有任何问题，还请多指教。