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
})

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

<template>

  <div class="hello">

    <button @click="increa">+</button>
    <p>数字：{{$store.state.count}}</p>
//不用加this
    <button @click="decrea">-</button>
  </div>
</template>

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

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

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

<script type="text/javascript">
            increa:function () {
              //  this.$store.state.count++
              //不应该是这样，应该是通过commit提交，如果开启vuex严格模式，就不允许直接修改仓库的state
              this.$store.commit('increa',{number:100})
            },
            decrea :function () {
              // this.$store.state.count--
              this.$store.commit('decrea',{number:100002})
            }

</script>

按理来说，应该是可以用this. $store.state.count++或者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时候还得写一次，是不是很麻烦？

问题一：

//理想化
 <!--希望把仓库里面的数据state 可以当做普通的模型变量，可以直接在页面上使用-->
        <p>数字：{{ count }}</p>

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';

            },

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

  <p>store.state.count数字：{{ countAias }}</p>

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

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

import {mapState, mapMutations} from 'vuex';

然后再export default那里写

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

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

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

代码优化

推荐阅读更多精彩内容