Vue前端框架学习（二）：vuex状态管理模式的使用

vuex的简介

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

它的应用场景为：

• 多个视图依赖于同一状态。例如，个人页面或其它页面都使用到用户信息，实现多组件之间的状态共享。
• 来自不同视图的行为需要改变同一个状态。例如，会员购买页面升级了用户会员信息，或在其它页面删除了用户会员信息。

vuex的安装与组成

使用vue-cli3以上的版本创建vue项目，可直接选择安装vuex，这样，vuex直接集成到项目中，路径为src/store/index.js，文件里创建了vuex实例new Vuex.store()，的内容为：

• state：数据仓库
• getter：用来获取数据
• mutation：用来修改数据的
• action：用来提交mutation

然后在main.js中将vuex实例挂载到vue对象上，这些工作vue-cli已帮我们做好。

vuex的使用

这里以在vue-cli创建的项目中实现一个count变量自增为例子说明vuex的使用。

初始化数据

在src/store/index.js的vuex实例中，在state字段上初始化count数据，如下：

new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {},
  actions: {},
  modules: {}
});

创建一个mutation

这个mutation的作用是修改count值，使其加1：

new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    countIncrease(state) {
      state.count++;
    }
  },
  actions: {},
  modules: {}
});

在页面中获取vuex数据

如上所述，已经在vuex实例中初始化了count数据，则在其他HTML页面模板中可直接用一下代码获取该数据：

{{ this.$store.state.count }}

或者在vue实例中利用计算属性返回count值，如下：

<script>
export default {
  name: "about",
  computed: {
    count() {
      return this.$store.state.count;
    }
  }
};
</script>

然后再页面模板中用一下代码获取数据：

{{count}}

在页面中修改vuex数据

在页面中修改vuex的数据时，不能直接对数据修改，而是通过mutation进行修改，比如我在某页面创建了一个按钮，绑定一个事件，如下：

<button @click="countIncrease" type="button">

那么，在vue实例的methods字段中，用this.$store的commit方法调用mutation：

<script>
export default {
  name: "about",
  computed: {
    count() {
      return this.$store.state.count;
    }
  },
  methods: {
    countIncrease() {
      this.$store.commit("countIncrease");
    }
  }
};
</script>

这样当我们点击按钮时，count值就能加1。

除此之外，this.$store的commit方法还可以传入第二个参数，用来指定count的值，为此mutation修改为：

mutations: {
    countIncrease(state, num) {
      state.count = num;
    }
 },

而按钮点击事件修改为：

methods: {
    countIncrease() {
      var num = 100;
      this.$store.commit("countIncrease", num);
    }
 }

这样当我们点击按钮，count的值变为100