Vuex ——0808

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

1、安装vuex：

cnpm install --save-dev vuex

2、在src 根目录下新建Vuex文件夹，该文件夹下新建 vuex.js 文件，做全局状态管理。内容如下：

import vue from 'vue';
import Vuex from 'vuex';
vue.use(Vuex);
let CONST_TYPE = "IS_ADD_NUM";
//创建整个store
let store = new Vuex.Store({
    //state存储全局数据的
    state: {
        number: 0
    },
    //获取state中的数据  里面方法有返回值  类似 computed计算属性
    getters: {
        getNumber: (state) => {
            return state.number;
        }
    },
    //操作state
    mutations: {
        addnum: (state, n) => {
            state.number += n;
        },
        [CONST_TYPE]: (state) => {
            state.number += 2;
        }
    },
    //可以下mutations的提交   可以异步操作
    actions: {
        //形参代表整个store     可以写{ commit }
        actionaddnum(con, num) {
            setTimeout(function () {
                con.commit("addnum", num);
            }, 2000);
        },
        async addNum({ commit, state }) {
            return await new Promise((resolve, reject) => {
                setTimeout(function () {
                    commit(CONST_TYPE);
                    resolve("ok");
                }, 2000);
            });
        }
    }
});

export default store;

3、在 main.js 文件中引入 vuex.js 文件，并将 Store 注入到 Vue 实例：

//引入整个store
import Store from './Vuex/vuex'
//将store注入到Vue实例
new Vue({
  el: '#app',
  store:Store,
  render: h => h(App)
})

4、在组件中获取状态（变量）：

HTML代码：

  <div id="app">
    {{num}}
    <hr>
    {{number}}
    <hr>
    {{disnum}}
    
    <button @click="addnumber">增加</button>
    <button @click="actions">通过action</button>
  </div>

JavaScript 代码：

<script>
//getter  映射使用数据
import {mapGetters,mapMutations,mapActions} from 'vuex'
export default {
  name: "app",
  data() {
    return {
      num:0
    };
  },
  mounted() {
    console.log(this.$store);
    //获取值
    this.num=this.$store.state.number;
  },
  methods:{
    ...mapActions({
      isdispatch:'actionaddnum',
      disasync:'addNum'
    }),
    actions(){
      //this.$store.dispatch("actionaddnum",10);
      //this.isdispatch(50);
      this.disasync().then((res)=>{
        console.log(res);
      });
    },
    addnumber(){
      // this.$store.commit("IS_ADD_NUM");
      // console.log(this.$store.state.number);
      this.addmeth(3);
    },
    ...mapMutations({
      addmeth:'addnum'
    })
  },
  computed:{
    number(){
      return this.$store.state.number;
    },
    ...mapGetters({
      disnum:"getNumber"
    })
  }
};
</script>

总结：
（1）在组件中访问 getters 数据，以属性的方式访问，也可以使用mapGetters映射；

同样，也有mapState,mapMutations,mapActions 辅助函数，其中mapMutations,mapActions是映射给方法的，mapState和mapGetters是映射给计算属性的。详细使用方法官方文档有介绍。

以 mapGetters 为例：
下边是以属性的方式访问：

computed: {
  getNumber() {
    return this.$store.getters.getNumber
  }
}

也可以不写在计算属性中，直接用变量接收this.$store.getters.getNumber

下边是使用mapGetters映射方式访问：

  computed:{
    ...mapGetters({
      //disnum 是属性名 ；getNumber 是store中的getter函数名
      disnum:"getNumber"
    })
  }

（2）getter 是操作state中的数据源并返回数据，并不会修改state中的数据源。

（3）只有mutation可以修改state中的数据源。

不能直接调用mutation里边的方法。
Vuex 中的 mutation 非常类似于事件：每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。要唤醒一个 mutation handler，你需要以相应的 type 调用 store.commit() 方法：

//分发mutation时可以传参
this.$store.commit("addnum",10)

（4）mutation 必须是同步函数。

（5）Action 类似于 mutation。
不同：
Action 提交的是 mutation，而不是直接变更状态。
Action 可以包含任意异步操作。

在组件中分发 action 用store.dispatch() 方法：

//分发action时，也可以传参
this.$store.dispatch("actionaddnum",10)