直接看概念太枯燥，还是边写代码边理解吧。
先做一个最简单的计数器，效果：
image.png
点加号数字加一，点减号数字减一。
安装
首先用vue-cli构建项目，具体教程请看：https://www.jianshu.com/p/b9c4db1a0815
然后进入目录，安装vuex：
npm install --save vuex
目录结构
image.png
在src目录下，新增store目录，store目录下有index.js文件和modules文件夹。把相关的store分离到modules目录下，再在index.js中引入。
App.vue是根页面级组件，main.js是入口文件。
引入vuex
store/index.js中引入vuex：
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
main.js中引入store/index.js：
import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store'
Vue.config.productionTip = false
new Vue({
el: '#app',
router,
store,
components: { App },
template: '<App/>'
})
modules
当应用比较简单时，可以把状态都写在一个store对象index.js里，但当应用变得非常复杂时，index.js就有可能很臃肿。
所以我们将 store 分割成模块（module）。
写一个count模块：
count_store.js：
export default{
state:{
count:1
}
}
store/index.js中引入：
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
import count_store from './modules/count_store.js';
export default new Vuex.Store({
modules:{
count:count_store
}
})
组件中使用
在components目录下新增一个demo.vue文件。
demo.vue：
<template>
<div>
<p>{{ $store.state.count.count }}</p>
</div>
</template>
$store.state.count.count即引用了count:1这个状态。
在App.vue中引用这个组件。
App.vue：
<template>
<div id="app">
<Demo></Demo>
</div>
</template>
<script>
import Demo from './components/demo.vue'
export default {
components: {
Demo
}
}
</script>
npm run dev运行，可以看到页面上有个数字1，就是count的初始值。
mutations
官方文档写道：
更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。Vuex 中的 mutation 非常类似于事件：每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数。
我们现在还缺一个加的按钮和一个减的按钮。
在count_store.js中增加mutations：
export default{
state:{
count:1
},
mutations:{
increment(state){
state.count++;
},
decrement(state){
state.count--;
}
}
}
在demo.vue中新增两个按钮，并使用 $store.commit('方法名') 来触发 mutations 中的方法（mutations中的方法是不分组的）：
<template>
<div>
<p>{{ $store.state.count.count }}</p>
<div>
<button @click="$store.commit('increment')">+</button>
<button @click="$store.commit('decrement')">-</button>
</div>
</div>
</template>
npm run dev运行，可以看到效果：
image.png
image.png
网友评论