前言

在 Vue初学习之状态管理 的前提下，我们再来学习下状态管理模式下的几个特性

State

Vuex 使用单一状态树来管理应用的状态数据，在Vue 组件中怎么展示状态呢？最简单的方法是在计算属性中返回某个状态值：

创建一个 store

const store = new Vuex.Store({
  state: {
    name: "lilei"
  },
  mutations: {
    changeName: (state, name) => {
      state.name = name
    }
  }
});

export default {
  name: "HelloWorld",
  props: {
    msg: String,
  },
  computed: {
    textname() {
      return store.state.name;
    },
  },
};

当 store.state.name 改变时，都会重新触发计算属性的计算，并更新关联的DOM

这种方式会使使用state 的组件频繁的导入，并且在测试时，需要进行模拟状态。

Vuex 通过 store选项，将 store 注入到每个子组件中:

new Vue({ data: data, render: h => h(App), store }).$mount("#app");

在子组件中可以通过以下方式进行使用

export default {
  name: "HelloWorld",
  props: {
    msg: String,
  },
  computed: {
    textname() {
      // this.$store进行引用
      return this.$store.state.name;
    },
  },
};

mapState

上面创建的store的属性比较少，如果要获取多个状态时，要声明较多的计算属性，这个操作就有点重复和冗余了，作为程序员，都是能有多懒就多懒的。为了解决这个问题，可以使用 mapState 辅助函数来生成计算属性

import { mapState } from "vuex";
export default {
  name: "HelloWorld",
  props: {
    msg: String,
  },
  computed: mapState({
    // 箭头函数
    textname: (state) => state.name,
    // 传字符串参数 'textname' 等同于 `state => state.name`
    textnameAlias: "textname",
    // 通过常规函数可以访问 this
    getName(state) {
      return state.name + this.name;
    },
  }),
};

如果映射的名称和state的子节点名称相同时，也可以使用如下的方式

import { mapState } from "vuex";
export default {
  name: "HelloWorld",
  props: {
    msg: String,
  },
  // 在模板里可以使用 {{name}}
  computed: mapState(["name"]),
};

对象展开运算符

mapState 函数返回的是一个对象。我们可以通过对象展开运行符，将多个状态与本地计算属性进行混合使用

import { mapState } from "vuex";
export default {
  name: "HelloWorld",
  props: {
    msg: String,
  },
  computed: {
    // 局部计算属性，再访问 状态的节点
    localName() {
      return "text" + this.name;
    },
    ...mapState(["name"]),
  },
};

总结

使用 Vuex 也要看情况而定，如果有些状态是严格属于单个组件，最好还是作为组件的局部状态。