首先打开vuex的官方文档，看看这张图

vuex.png

mutations是提交修改store的状态的唯一方法。每个mutation都有一个字符串的事件类型 (type) 和一个回调函数 (handler)，回调函数就是我们改变state的方法。

actions跟mutations差不多，但是action不直接修改state，它是提交到mutation上让mutation来修改state。要记住mutation是唯一可以修改state的。actions跟mutation的区别是 mutation必须限定是同步操作，而actions没有这个限制，如果你需要异步操作或调用异步API，你可以通过actions来进行操作。

state 其实就是保存状态的地方。修改了state，页面会自动更新所有引用到state的内容。

理论上，搞懂上面的就可以进行一些基本的操作了。

所以接下来就是进行一些简单的例子

首先我们需要安装vuex

npm install vuex --save
npm install es6-promise --save //做兼容，vuex依赖于promise，部分浏览器没有实现的promise，没错，就是万恶之源IE.....

因为如果项目有一定规模之后，如果所有store都写在单组件文件上，会显得很乱很蛋疼，不方便维护管理。所以我们可以在src目录下创建一个store目录，专门用于管理状态。在store目录下创建index.js

import Vue from 'vue'
import 'es6-promise/auto' //引用依赖
import Vuex from 'vuex'

Vue.use(Vuex) //使用vuex插件

当项目比较大规模的时候，所有的东西都写在index上也会显得很臃肿。所以我们再继续创建两个文件。state.js用于保存状态，mutation.js用来改变状态。然后在index.js导入这两个js文件。然后导出store

import Vue from 'vue'
import 'es6-promise/auto'   //引用依赖
import Vuex from 'vuex'
import state from './state'  //引用同目录下的state.js
import mutations from './mutations'  //引用同目录下的mutations.js

Vue.use(Vuex) //使用vuex插件

export default new Vuex.store({
  state,
  mutation
})

比如在页面上你需要保存你的登录名，你可以在state.js上这么写

let defaultUsername = '未登录'  //定义一个默认的名字
//部分浏览器不支持localStorage会抛出异常，所以我们需要用try catch来获取异常，这样就不报异常了。
try {
  if (localStorage.userName) {   //localSrorage是HTML5的新东西，可以将数据保存在本地，类似于cookie，但是保存时间是永久
    defaultUsername = localStorage.userName
  }
} catch (e) {}

export default{
  userName: defaultUsername    //导出userName到index.js
}

在mutation.js上这么写

export default{
  changeUsername (state, userName) {  //改变userName的方法 ，userName是页面传过来的参数。
    state.userName = userName  //改变state中的userName
    try {
      localStorage.userName = userName  //本地存储userName
    } catch (e) {}
  }
}

写到这里忽然想起好像没说为啥要用localStorage......因为js是运行在内存中，页面F5刷新之后内存被释放然后重新加载js代码，所以这时你的vuex的数据也会被清除....所以你需要用localStorage去进行本地存储一下

写完了store之后改怎么在页面上使用。

在入口文件main.js中导入store，一定要记得导入，不然谁认识你store是哪位

import store from './store/index.js'

然后还要注册一下

new Vue({
  el: '#app',
  router,
  store,  //引用
  components: { App },
  template: '<App/>'
})

这样我们才可以在页面上引用

  //调用state里面的userName
  <div>{{this.$store.state.userName}}</div>

刚才我们已经在mutation上定义好了一个改变state中userName的方法changeUsername
我们可以在方法中调用

...
methods: {
    change (userName) {
        this.$store.commit('changeUsername ', userName)  //commit是调用mutation的方法，同理dispatch是调用action的方法，可以看看上面那张图
    }
}

这样就使用了vuex来管理状态了。

还有一种更加方便的方法去调用这些方法数据

在组件中引入

import { mapState } from 'vuex'

export default{
    ... //省略
    computed: {
    ...mapState(['userName'])
  },
}

这样我们就可以直接在页面上引用,不需要每次都写又长又臭的this.$store.state.userName

<div>{{this.userName}}</div>

同理mutation也一样

import { mapState, mapMutations } from 'vuex'

export default{
    ... //省略
    methods: {
    change (userName) {
        this.changeUsername(userName)
    },
    ...mapMutations(['changeUsername'])
  },
}

vuex中还有两个属性 getter和 module

Getter属性跟computed计算属性差不多。就像计算属性一样，getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。这是一个官方的例子

const store = new Vuex.Store({
  state: {
    todos: [
      { id: 1, text: '...', done: true },
      { id: 2, text: '...', done: false }
    ]
  },
  getters: {
    doneTodos: state => {
      return state.todos.filter(todo => todo.done)
    }
  }
})

引用

store.getters.doneTodos // -> [{ id: 1, text: '...', done: true }]

Module属性是将store分成多个模块,防止store因为应用变得非常复杂时，store变得非常臃肿
官方例子

const moduleA = {
  state: { ... },
  mutations: { ... },
  actions: { ... },
  getters: { ... }
}

const moduleB = {
  state: { ... },
  mutations: { ... },
  actions: { ... }
}

const store = new Vuex.Store({
  modules: {
    a: moduleA,
    b: moduleB
  }
})

store.state.a // -> moduleA 的状态
store.state.b // -> moduleB 的状态

这样你可以将一种或者一类状态归为一个store进行分开管理，这样十分方便维护。

VUEX 基本用法