Vuex 是一个状态管理工具,它采用集中式存储管理应用的所有组件的状态
vuex的核心:
1、state:存储数据的
2、actions:通常用于异步方法操作,不可以修改state中的数据,通常会调用mutations中的方法
在actions中方法中通过commit(‘mutaions方法名’,要传递的值);
3.mutations在这里面操作state中的数据
4.getters: 相当于是vuex中的state的计算属性,可以对数据进行过滤的一些操作
5.module:当satte中的数据量太大的时候,可以用modules来进行进行管理切割,让每个模块拥有自己的state\actions...方法
不管module切割多少个store,最终都会将state,actions,modules合并到一个store上面
vuex中数据持久化的问题?
实现原理:利用本地存储localstorage
这里除了通过本地存储之外,也可以通过一个vuex数据持久化插件来解决,
persistedstate这种方法的思路和localstorage的思路大概是一样的。
例如:vuex-persistedstate
第一步:安装:
npm install --save vuex-persistedstate
第二步:在vuex中的index.js引入
import createPersistedState from "vuex-persistedstate";
第三步:在vuex实例上通过plugins注入
export default new Vuex.Store({
plugins: [createPersistedState()]
})