VueX起步（二、同步修改数据）

• 在脚手架创建时候选择依赖要把vuex给选上，（如果在脚手架忘记选了就npm i vuex或者yarn add vuex），我这里展示的是自己创建了一个叫vuex的文件夹里面也创建了一个store.js的文件。搭建好了会在src文件夹多一个叫store的文件夹，这个文件夹里面有着index.js这个文件（为了后期维护方便,单一职责原理，所以选择代码分离）。

• store.js文件初始一般都是这样

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

const state = {//状态，也可以理解成之前说的模型数据
  
}

 const mutations ={//定义对state里面的操作

 }

export default new Vuex.Store({
       state,
        mutations
})

至于为什么这样，下面再解释吧。
假设现在我有一个同步修改的数据要处理，比如一个做加减法的摁扭，改变一个值。

这里我增加了count这个常量，所以要把它加入到仓库里面，并且给个初始值为0

const state = {//状态，也可以理解成之前说的模型数据
  count: 0,
}

然后在模板那里也要export函数increa和decrea，实现加减。

按理来说，应该是可以用this.store.state.count--但是在vuex管理思想不是这样，应该是通过commit进行提交然后再store.js文件里面mutations就行处理。

const mutations ={//state为仓库对象，paylod为commit时候传入的载荷（负载）
     increa :function(state,paylod) {
         console.log(paylod);
         state.count+=paylod.number
    },
     decrea :function (state,paylod) {
         state.count--
         console.log(paylod);
     },

}

代码优化

• 问题一：$store.state，假设我一个页面要用很多次，那我可不可以只写一次？
• 问题二：decrea方法定义一次，commit时候还得写一次，是不是很麻烦？

问题一：

//理想化
 
        
数字：{{ count }}

1.// 需要从 vuex 里面导出一个函数 mapState(作用，可以把仓库里面的state映射到组件的 data 里面，要映射成计算属性才可以) map 映射 State 状态： 把 state 里面的状态隐射到组件的内容使用，减少 this.$store.state

    import {mapState} from 'vuex';
//并且在export default里面加上 computed
 computed: mapState(['count']),
        /**
原理
         * mapState(['count']), 底层：
         * count: function(){
         *     return this.$store.state.count;
         *
         * }
         */

但是还有个小问题哦，假设computed里面原先就有一个我自己定义的函数列？那就

 computed: {
            // ... 使用 es6 的展开即可,并且给count取别名
          ...mapState({countAias: 'count'}),

            /**
             * mapState(['count']), 底层：
             * count: function(){
             *     return this.$store.state.count;
             *
             * }
             */
            // 之前存在一个自己的count
            count: function () {
                return '自己写的count';

            },

这时候我用的话就是直接用了

  
store.state.count数字：{{ countAias }}

这样就不会和别人冲突了。

问题二：
如果可以把仓库里面的 mutations 映射到组件的 methods 里面，则我们就可以直接修改 state
那我首先再导入这个

import {mapState, mapMutations} from 'vuex';

然后再export default那里写

  methods: {
            ...mapMutations(['increa','decrea'])
}