HOS基础开发平台

# 全局状态管理

# 什么是vuex

vuex是一个专门为vue.js设计的集中式状态管理架构。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

# vuex使用场景

vuex主要是是做数据交互，父子组件传值可以很容易办到，但是兄弟组件间传值（兄弟组件下又有父子组件），或者大型spa单页面框架项目，页面多并且一层嵌套一层的传值，异常麻烦，用vuex来维护共有的状态或数据会更便捷

场景说明：

  • 由于vuex中的state存放的数据在页面刷新时会丢失，vuex只能用于单个页面中不同组件（例如兄弟组件）的数据流通

# vuex核心概念

  • 1、store：类似容器，包含应用的大部分状态 一个页面只能有一个容器 状态存储是响应式的 不能直接改变store中的状态，唯一途径显示地提交mutations 在actions里面，也不能直接更改state里面的状态值，必须先定义一个mutations，然后在actions里面commit这个mutations，从而来更改state的状态值； 如果要再次请求异步，那么就是dispatch一个actions
  • 2、State：包含所有应用级别状态的对象
  • 3、Getters：在组件内部获取store中状态的函数，类似组件的计算属性computed
  • 4、Mutations：唯一修改状态的事件回调函数，默认是同步的，如果要异步就使用Actions
  • 5、Actions：包含异步操作、提交mutations改变状态
  • 6、Modules：将store分割成不同的模块

# 目录结构

此框架中我们使用 vuex (opens new window) 来进行全局状态管理，相关配置放 置在 @/store文件夹中。其目录结构为：

store
|   index.js            初始化配置
|   mutation-types.js   存放mutation常量
|   mutation.js         全局mutations
|   state.js            全局state
|   modules             store 模块
    |   staff.js        staff模块
    |   ...

vuex 的具体配置请参考 配置 (opens new window)

# 页面使用

1.读取store里的值：

this.$store.state.字段名 如果有 moudle 的话，假设叫 user ,那么取值又要变了，加上 module 名

this.$store.state.user.字段名

2.发起操作请求:

this.$store.dispatch('action中的方法名' , '参数') ;

参数你可以随便传json

3.getters的用法

this.$store.getters.filterDoned filterDoned 是在 todo 里写的一个 getters 方法，就这么调用噢

4.mapState，mapGetters，mapMutations，mapActions辅助函数的使用

import { mapState,mapGetters,mapMutations, mapActions } from "vuex";
export default {
  computed: {
    // 通过global获取user的信息
    ...mapState("global", {
      user: (state) => state.user,
      lang: (state) => state.lang,
      theme: (state) => state.theme,
    }),
    // 使用对象展开运算符将 getter 混入 computed 对象中
    ...mapGetters([
      'doneTodosCount',
      'anotherGetter',
      // ...
    ])
  },
  methods: {
    ...mapMutations([
      'increment', // 将 `this.increment()` 映射为 `this.$store.commit('increment')`

      // `mapMutations` 也支持载荷：
      'incrementBy' // 将 `this.incrementBy(amount)` 映射为 `this.$store.commit('incrementBy', amount)`
    ]),
    ...mapActions("global", ["setGlobalState"]),
  }
}

← 拦截器 →