Vuex的使用

120 阅读1分钟

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()]
})