vuex

48 阅读1分钟

一、什么是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后触发才可以看到本地存储数据的的变化。、