在学习vuex之前，我们要思考这些问题：什么是vuex？为什么使用vuex？怎么使用vuex？伴随着这些问题我们来开始学习，最好的学习资料就是官方文档，建议在看本篇文章之前先把vuex官方文档过一遍，vuex官方文档地址：https://vuex.vuejs.org/zh-cn/
本文是就上面的第三个问题vuex的使用进行的，关于前两个问题，读过官网就可以找到答案，下面就以一个简单的demo对vuex进行实际的应用，demo主要是对数字的增加和减少。
使用脚手架创建vue项目
在终端输入以下指令
vue init webpack-simple vuex-demo
cd vuex-demo
npm install
npm run dev
安装vuex，输入以下指令：
npm install vuex -D
创建文件夹命名为store,在该文件夹下新建index.js、getters.js、 actions.js和mutations.js
目录结构如下图所示：
目录结构.png
在main.js中引入store仓库，代码如下：
import App from './App.vue'
import store from './store/index'
new Vue({
store,
el: '#app',
render: h => h(App)
})
在demo中使用vuex的辅助函数mapGetters和mapActions对赋值和事件进行统一处理，
App.vue中有关代码如下：
<div id="app">
<h1>{{ msg }}</h1>
<input type="button" value="增加" @click="add"/>
<input type="button" value="减少" @click="minus"/>
<h1>{{ count }}</h1>
</div>
</template>
<script>
import { mapGetters, mapActions } from 'vuex'
export default {
name: 'app',
data () {
return {
msg: 'vuex学习demo'
}
},
computed: mapGetters([
'count'
]),
methods: mapActions([
'add',
'minus'
])
}
</script>
index.js中代码如下：
import Vuex from 'vuex'
import getters from './getters'
import actions from './actions'
import mutations from './mutations'
Vue.use(Vuex)
const state = {
count: 0
}
export default new Vuex.Store({
state,
getters,
actions,
mutations
})
getters.js代码如下：
count(state) {
return state.count
}
}
actions.js代码如下:
add: ({
commit
}) => {
commit('add')
},
minus: ({
commit
}) => {
commit('minus')
}
}
mutations.js代码如下：
add(state) {
state.count++
},
minus(state) {
if(state.count === 0){
state.count = 0
}else{
state.count--
}
}
}
最后附上demo地址，https://github.com/BoryLee/vuex-demo
小知识：
. 表示当前目录，.. 表示上一级目录，/表示根目录
