vuex 初体验

vuex是vue的状态管理工具，vue进阶从es6和npm开始，es6推荐阮一峰大神的教程。

vuex学习从官方文档和一个记忆小游戏开始。本着兴趣为先的原则，我先去试玩了一把-->。

 

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式，如果你刚接触这个东东肯定像我一样蒙，所以我选择把这个游戏的源码从头到尾看一遍，主要看文件夹vuex里的actions,mutations,store部分，理解了一行就加一个批注。直到全部理解了为止。

从图说起：

这个图最简单的表示了vuex的工作流程。以memory小游戏为例，它的主要组件是chessboard组件，下面是一堆card组件，在小游戏的stage对象里面有一个leftmatched对象，用于表示还有多少对扑克牌没有匹配成功。

vuex store实例

每一个 Vuex 应用的核心就是 store（仓库），这里存放了应用中的大部分状态stage，操作状态的mutations，触发mutations的actions。

以上面的那个小游戏为例，最基本的有三个状态stage，ready,playing,pass,分别表示开始玩之前，正在玩和通关三种状态，这些状态都被放在stage中。

在mutations中有一个reset方法，用于重置通关后再来一局。将cards全部翻转过去，也就是重置了状态。

可以用类比来理解store实例：

Vue	Vuex
Vue实例vm	Vuex.Store 实例store
vm的data属性	store实例的stage属性
vm的methods方法	store实例的mutations方法
vm的computed属性	store实例的getter属性

上面的每一条在作用上基本上可以看作是一一对应的，stage对应data,getters对应computed属性等。

store实例的生成

看来自教程的代码，与生成vue实例一样，同样是调用一个构造函数Vuex.Store,并传入一个option对象，从而生成一个store实例。这个实例包含了应用的状态，和改变应用状态的方法。

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  }
})

 

但是store实例尽管提供了改变状态的方法，它本身是不改变状态的。改变状态的源头来自组件和生命周期的钩子函数。 在组件中，使用计算属性来读取应用的状态，通过action——>mutation——>stage来改变应用的stage。

另外，并不是说应用的所有状态都应该放到vuex的stage中，stage主要放用于共享的，或者应用级别的状态，memory小游戏为例，一张卡片是否翻转应该属于card组件的状态，应当局部存放，而玩家匹配了几组卡片则属于应用层面的状态，应当放在vuex中。

vuex的注入

vuex的store实例是作为生成vue实例的选项之一被注入到vue实例中的，同时可以被实例中的各组件所访问。看下面的例子main.js用于生成vue实例，store.js用于生成store实例：

//main.js
import store from './vuex/store'//引入store实例

new Vue({
    el: '#app',
    template: '<App/>',
    components: { App },
    store //store作为生成vue实例的选项之一，与el,template等一起被引入
})

//store.js export  store实例，在上面被引入
import Vuex from 'vuex'
Vue.use(Vuex)；
/..../
export default new Vuex.Store({//store实例接口，没有写actions
    state,
    getters,
    mutations
})

 

 

vuex和组件

vuex是一个就像一个状态仓库，组件想要访问这些共享的状态，或者触发改变状态的mutations方法，可以这样做：

this.$store.stage.onlyUnfinish//访问共享的状态
this.$store.commit(listByImportant)//出发vuex mutations中的排序方法