五分钟搞懂Vuex

vuex 是一个专门为vue.js应用程序开发的状态管理模式。

这个状态我们可以理解为在data中的属性，需要共享给其他组件使用的部分。
也就是说，是我们需要共享的data，使用vuex进行统一集中式的管理。

简要介绍各模块在流程中的功能：

1. Vue Components：Vue 组件。HTML 页面上，负责接收用户操作等交互行为，执行 dispatch 方法触发对应 action 进行回应。
2. dispatch：操作行为触发方法，是唯一能执行 action 的方法。
3. actions：操作行为处理模块,由组件中的$store.dispatch('action 名称', data1)来触发。然后由 commit() 来触发 mutation 的调用 , 间接更新 state。负责处理 Vue Components 接收到的所有交互行为。包含同步/异步操作，支持多个同名方法，按照注册的顺序依次触发。向后台 API 请求的操作就在这个模块中进行，包括触发其他 action 以及提交 mutation 的操作。该模块提供了 Promise 的封装，以支持 action 的链式触发。
4. commit：状态改变提交操作方法。对 mutation 进行提交，是唯一能执行 mutation 的方法。
5. mutations：状态改变操作方法，由 actions 中的commit('mutation 名称')来触发。是 Vuex 修改 state 的唯一推荐方法。该方法只能进行同步操作，且方法名只能全局唯一。操作之中会有一些 hook 暴露出来，以进行 state 的监控等。
6. state：页面状态管理容器对象。集中存储 Vue components 中 data 对象的零散数据，全局唯一，以进行统一的状态管理。页面显示所需的数据从该对象中进行读取，利用 Vue 的细粒度数据响应机制来进行高效的状态更新。
7. getters：state 对象读取方法。图中没有单独列出该模块，应该被包含在了 render 中，Vue Components 通过该方法读取全局 state 对象。

下面我们正式开始，一步步使用vuex：

首先创建一个vue-cli项目

执行下面的命令，创建一个app项目（这里也可以使用其他非webpack模板，以及非app名称）：

vue init webpack app

创建完成之后，我们进入文件夹下，并且运行项目

cd app/
npm run dev

接下来我们在src目录下创建一个vuex文件夹。

并在vuex文件夹下创建一个store.js文件。

文件夹目录长得是这个样子：

目前我们还没有引入vuex，我们需要先下载vuex，并且引入它

在保证我们处于我们项目下，在命令行输入下面命令，安装vuex：

npm install vuex --save

安装成功之后，我们就可以在store.js中尽情玩耍我们的vuex了！

在store.js文件中，引入vuex并且使用vuex，这里注意我的变量名是大写Vue和Vuex。

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const state = {
    count: 0
}

export default new Vuex.Store({
    state
})

接下来，在main.js中引入store：

import Vue from 'vue'
import App from './App'
import router from './router'
import store from './vuex/store' // 引入store
Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
    el: '#app',
    router,
    store,
    components: { App },
    template: '<App/>'
})

然我我们在任意一个组件中就可以使用我们定义的count属性了。

这里我们在helloWorld中使用一下，去除helloworld.vue中不用的标签：

<template>
  <div class="hello">
    <h3>{{$store.state.count}}</h3>
  </div>
</template>

打开我们刚才运行项目的浏览器，可以看到已经使用成功了！

并且在vue开发工具中我们可以看到我们定义的变量count：

到这一步，已经成功了一小半！vuex很简单吧？

回想一下，我们只需要在下载安装使用vuex，在我们定义的store.js中定义state对象，并且暴露出去。

在main.js中使用我们的store.js（这里是为了防止在各个组件中引用，因为main.js中，有我们的new Vue 实例啊！）

现在我们已经使用了vuex中的state，接下来我们如何操作这个值呢？ 没错！用mutations和actions。

我们继续操作store.js文件；

我们在sotre.js中定义mutations对象，该对象中有两个方法，mutations里面的参数，第一个默认为state，接下来的为自定义参数。

我们在mutations中定义两个方法，增加和减少，并且设置一个参数n，默认值为0，然后在Vuex.Store中使用它：

/**
 * mutations 里面放置的是我们操作state对象属性的方法
 */
const mutations = {
    mutationsAddCount(state, n = 0) {
        return (state.count += n)
    },
    mutationsReduceCount(state, n = 0) {
        return (state.count -= n)
    }
}
export default new Vuex.Store({
    state,
    mutations
})

然后我们在helloWorld.vue中，使用这个方法

还记得我们如何在组件中使用mutations吗？就和自定义事件非常相似。

<template>
  <div class="hello">
    <h3>{{$store.state.count}}</h3>
    <div>
      <button @click="handleAddClick(10)">增加</button>
      <button @click="handleReduceClick(10)">减少</button>
    </div>
  </div>
</template>

methods: {
    handleAddClick(n){
      this.$store.commit('mutationsAddCount',n);
    },
    handleReduceClick(n){
      this.$store.commit('mutationsReduceCount',n);
    }
  }

来浏览器看一下效果如何！

我们可以看到每当触发事件时，我们都可以在vue开发工具中看到我们触发的mutations方法，以及参数

完美！

接下来就是actions，actions是异步操作；

创建actions对象，并且使用；

这里我在两个方法中使用了两个不同的参数，一个是context，它是一个和store对象具有相同对象属性的参数。在第二个函数中，我是直接使用了这个对象的commit的方法。

凭大家喜好就行。

const actions = {
    actionsAddCount(context, n = 0) {
        console.log(context)
        return context.commit('mutationsAddCount', n)
    },
    actionsReduceCount({ commit }, n = 0) {
        return commit('mutationsReduceCount', n)
    }
}
export default new Vuex.Store({
    state,
    mutations,
    actions
})

在helloWorld.vue中

在methods中，增加两个方法，使用dispath来触发：

 <div>异步操作</div>
  <div>
    <button @click="handleActionsAdd(10)">异步增加</button>
    <button @click="handleActionsReduce(10)">异步减少</button>
  </div>

handleActionsAdd(n){
      this.$store.dispatch('actionsAddCount',n)
    },
    handleActionsReduce(n){
      this.$store.dispatch('actionsReduceCount',n)
    }

进入浏览器看下效果如何！

最后就是getters

我们一般使用getters来获取我们的state，因为它算是state的一个计算属性：

const getters = {
    getterCount(state, n = 0) {
        return (state.count += n)
    }
}
export default new Vuex.Store({
    state,
    mutations,
    actions,
    getters
})

<h4>{{count}}</h4>

const getters = {
    getterCount(state) {
        return (state.count += 10)
    }
}

getters算是非常简单的了。

到这里，如果全都看懂了，vuex你已经没有压力了。

但是vuex官方给了我们一个更简单的方式来使用vuex， 也就是 {mapState, mapMutations, mapActions, mapGetters}

只要我们把上面基础的搞懂，这些都不在话下，只是方面我们书写罢了。

就这么简单，这里我们用到了es6的扩展运算符。如果不熟悉的同学还是去看看阮一峰大神的《Es6标准入门》这本书，我是看完了，受益匪浅！

<script>
import {mapState, mapMutations, mapActions, mapGetters} from 'vuex'
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  methods: {
    ...mapMutations({
      handleAddClick: 'mutationsAddCount',
      handleReduceClick: 'mutationsReduceCount'
    }),
    ...mapActions({
      handleActionsAdd: 'actionsAddCount',
      handleActionsReduce: 'actionsReduceCount'
    })
    // handleAddClick(n){
    //   this.$store.commit('mutationsAddCount',n);
    // },
    // handleReduceClick(n){
    //   this.$store.commit('mutationsReduceCount',n);
    // },
    // handleActionsAdd(n){
    //   this.$store.dispatch('actionsAddCount',n)
    // },
    // handleActionsReduce(n){
    //   this.$store.dispatch('actionsReduceCount',n)
    // }
  },
  computed: {
    count(){
      return this.$store.getters.getterCount
    }
  }
}
</script>

同理，getters和 state也可以使用 mapState，mapGetters

如果你更懒的话，我们可以使用数组，而非对象，或者es6里面的对象简写方式

就像这种