在脚手架创建时候选择依赖要把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--但是在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'])
}
