一、什么是vuex:
- 集中式状态管理仓库
二、何时使用:
- 多个组件需要共享数据时
三、五个核心概念:
-
state 集中的数据
-
mutations 唯一可以修改state中数据的地方
-
actions mutations只能写同步代码,如果有异步就要写在actions,比如ajax
-
getters 类似计算属性,可以简化state有时候写得太繁琐
-
modules 项目很大的时候,模块化拆vuex
四、辅助函数:
-
mapState -
mapMutations -
mapGetters -
mapActions
四、缺点:
-
不能持久化,因为存在内存,一刷新就没有了,解决:vuex-persistedstate 或者 直接用localStorage
-
一个模块去操作另一个模块的mutations
store.commit('permission/setRoute',[],{root:true})
五、模块化+命名空间
目的:让代码更好维护,让多种数据分类更加明确。
namespace:true
六、vuex执行流程
组件 -> dispacth -> action -> 发送ajax拿后端数据 -> commit -> mutations -> 修改state -> 响应式 -> 组件会自动更新
七、持久化存储:
使用 vuex-persistedstate插件
注意:
===> 默认是存储在localStorage中
===> key是存储数据的键名
===> paths是存储state中的那些数据,如果是模块下具体的数据需要加上模块名称,如user.token
===> 修改state后触发才可以看到本地存储数据的的变化。、