vuex五大特性

vuex状态管理

1、vuex是什么

VueX 是一个专门为 Vue.js 应用设计的状态管理架构，统一管理和维护各个vue组件的可变化状态(你可以理解成 vue 组件里的某些data )。

2、vuex 的五个核心概念
State 定义状态(变量)

state里面存放的数据是响应式的，Vue组件从store中读取数据，若是store中的数据发生改变，依赖这个数据的组件也会发生更新

Getter 获取状态(变量的值)

A、getters 可以对State进行计算操作，它就是Store的计算属性
B、 虽然在组件内也可以做计算属性，但是getters 可以在多组件之间复用
C、 如果一个状态只在一个组件内使用，是可以不用getters

Mutation 修改状态(修改变量的值)

A、 包含多个直接更新 state 的方法(回调函数)的对象
B、 谁来触发: action 中的 commit(‘mutation 名称’)
C、 只能包含同步的代码, 不能写异步代码

Action 触发 mutation 函数,从而修改状态

A、包含多个事件回调函数的对象
B、通过执行: commit()来触发 mutation 的调用, 间接更新 state
C、谁来触发: 组件中: $store.dispatch(‘action 名称’, data1) // ‘zzz’
D、可以包含异步代码(定时器, ajax)

Module 当状态很多时,把状态分开来管理，模块化开发

当项目庞大，状态非常多时，可以采用模块化管理模式。Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割。

3、vuex 本地持久化
当刷新页面,项目重新加载,vuex 会重置,所有状态回到初始状态,使用 vuex-persistedstate 可以避免这种情况

安装 vuex-persistedstate
npm i vuex-persistedstate

在vuex中,添加plugins
import createPersistedState from ‘vuex-persistedstate’

 plugins: [createPersistedState(