vuex

• 什么是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})

• 命名空间

  • 默认情况下虽然分了模块，但是里面的操作都是全局，容易互相覆盖影响，所以一般用了模块化最好开启模块的命名空间，类似分家了每家上锁
  • namespaced:true

• vuex执行流程

  • 组件 -> dispacth -> action -> 发送ajax拿后端数据 -> commit -> mutations -> 修改state -> 响应式 -> 组件会自动更新

vuex-persistedstate如何使用

• 安装插件

  yanr add vuex-persistedstate --save

• 引入并使用插件

注意：

===> 默认是存储在localStorage中

===> key是存储数据的键名

===> paths是存储state中的那些数据，如果是模块下具体的数据需要加上模块名称，如user.token

===> 修改state后触发才可以看到本地存储数据的的变化。、