Vuex简介

官方描述Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。
个人短见：Vuex为方便存储、改变全局变量，实现数据、行为和视图的逻辑分离和状态同步。
Vuex的4个概念state、getters、mutations、actions。具体描述浏览文档

构建

在src目录下建一下文件结构

src
    store   //总目录
        modules  // 模块目录
            counter.js  
        actions.js  
        getters.js 
        index.js    //vuex索引
        mutation-types.js  
        mutations.js  // 

注意：
更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。

实例

目录变动

src
    componenets  //新建
        Counter.vue  //新建
        CounterStore.vue //新建
        foo.vue   // 文件移动

无Vuex的测试实例

Counter.vue为无Vuex的测试实例，代码如下：

//Counter.vue
<template>
  <div>
    <text class="title">Clicked: {{ count }} times, count is {{ evenOrOdd }}.</text>
    <button @click="increment">+</button>
    <button @click="decrement">-</button>
    <button @click="incrementIfOdd">Increment if odd</button>
    <button @click="incrementAsync">Increment async</button>
  </div>
</template>

<script>
export default {
    data: {
        count : 0,
    },

    computed: {
        count:function () {
            console.log('this.count='+this.count);
            return this.count;
        },
        evenOrOdd : function () {
            return this.count % 2 === 0 ? 'even':'odd';
        }

    },
    methods: {
        increment (state) {
            this.count++
        },
        decrement (state) {
            this.count--
        },
        incrementIfOdd ({ commit, state }) {
          if ((this.count + 1) % 2 === 0) {
            this.increment();
          }
        },
        incrementAsync ({ commit }) {
          return new Promise((resolve, reject) => {
            setTimeout(() => {
              this.increment();
              resolve()
            }, 1000)
          })
        }
    }
}
</script>

//entry.js
import Counter from './components/Counter.vue'

var vm = new Vue(Vue.util.extend(
    { el: '#root',
    store,
    }, Counter ))

浏览器运行结果如下：

带Vuex的测试实例

主要代码如下：

entry.js
var vm = new Vue(Vue.util.extend(
    { el: '#root',
    store,
    }, CounterStore))

//CounterStore.vue
<template>
  <div>
    <text class="title">Clicked: {{ getCount }} times, count is {{ evenOrOdd }}.</text>
    <button @click="increment">+</button>
    <button @click="decrement">-</button>
    <button @click="incrementIfOdd">Increment if odd</button>
    <button @click="incrementAsync">Increment async</button>
  </div>
</template>

<script>
import { mapGetters, mapActions } from 'vuex'
export default {
    computed: mapGetters([
        'evenOrOdd',
        'getCount'
    ]),
    methods: mapActions([
      'increment',
      'decrement',
      'incrementIfOdd',
      'incrementAsync'
    ])
}
</script>

//store/modules/countr.js
import Vue from 'vue'
import Vuex from 'vuex'

import * as types from '../mutation-types'

const state = {
  count: 0
}


const mutations = {
    [types.Counter_Increment] (state) {
        state.count++
    },

    [types.Counter_Decrement] (state) {
        state.count--
    }
}

const actions = {
    increment ({commit}) {
        commit(types.Counter_Increment)
    },
    decrement ({commit}) {
        commit(types.Counter_Decrement)
    },
    incrementIfOdd ({ commit, state }) {
      if ((state.count + 1) % 2 === 0) {
        commit(types.Counter_Increment)
      }
    },
    incrementAsync ({ commit }) {
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          commit(types.Counter_Increment)
          resolve()
        }, 1000)
      })
    }
}

const getters = {
    evenOrOdd : state => state.count % 2 === 0 ? 'even':'odd',
    getCount : state=> state.count
}

export default {
    state,
    getters,
    actions,
    mutations
}

运行结果也如上图。

vue的数据更新主要通过数据绑定，通过computed来实现，当有data中的参数改变时会重绘并调用computed和data里的值。具体描述请查看Weex或者Vue文档。
当使用Vuex，差别不大，也是数据绑定，通过mapGetters和mapActions将computed方法映射到store中，当store中数据有变化时同样会导致重绘。
普通数据更新步骤
methods=>data=>computed

Store数据更新步骤
action => mutations => state =>重绘=>computed=>getters

参考代码

---