vuex学习与实践一——初步介绍vuex，state和mutations

1、什么是VUEX？
vuex是专门为vue.js应用程序所开发的状态管理模式，采用了集中式存储来管理各组件之间的状态。也就是将 Vue.js 程序中各页面中公用的数据和获取、改变这些数据的方法抽离出来，方便各个页面调用，以及页面之间的数据传输。
2、什么情况下使用VUEX？
（1）如果不打算开发大型单页应用，使用 Vuex 可能是繁琐冗余的。
（2）如果是简单应用一个简单的 global event bus 就足够您所需了。
（3）如果需要构建是一个中大型单页应用，您可能会考虑如何更好地在组件外部管理状态，Vuex 将是较好的选择。
3、初步应用
vuex 的状态是存储在 store 里面的，要修改状态就只能进行 mutation 的提交 commit，一旦进行提交成功，状态被改变后，相关使用该状态的组件也会更新状态信息。
下面是用vuex的state和mutations写的一个简单的加减运算实例。
（1）在src文件夹下建一个store.js，代码如下

import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex);

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++;
    },
    reduction(state) {
      state.count--;
    }
  }
});
export default store;

（2）main.js中引入store.js

import store from "./store";

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

（3）组件home.vue中应用

<template>
  <div id="salary-list-second">
    <button @click="incrementFun">+</button>
    <button @click="reductionFun">-</button>
    <p>{{currentCount}}</p>
  </div>
</template>
<script>
export default {
  name: "home",
  computed: {
    currentCount() {
      return this.$store.state.count;
    }
  },
  methods: {
    incrementFun() {
      this.$store.commit("increment");
    },
    reductionFun() {
      this.$store.commit("reduction");
    }
  }
};
</script>
<style>
button {
  padding: 0.2rem;
}
p {
  line-height: 0.5rem;
}
</style>