一、vuex简单计数器

直接看概念太枯燥，还是边写代码边理解吧。

先做一个最简单的计数器，效果：

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