vuex入门

        在vue开发中，如果你的项目比较简单的话，在设计数据的状态、存储和操作的时候可以通过将数据存入到data中，通过eventBus的方式将数据发送出去，通过一堆methods来写关于这个操作的一些方法。但是如果到大型的项目开发中，如果通过这样子的方法去搞开发可以说不光打的代码多，而且代码的重用性非常的差，写代码会写的很繁琐。所以这个时候就应该用我们vue官方推荐的一个vuex来优化我们的模块设计。首先我们来看一下官方关于vuex的概念图：

        在这幅图中，state表示的是数据的存储状态，当你打开一个页面的时候，数据从后端获取并在浏览器那里加载完成后，一项关键的数据就会存入到state中，以供你以后操作的时候改变到state的变量时使视图发生相应的改变。components就是组件，components中通过vuex自带的一个mapGetters方法来获取state中相应的数据，从而渲染到components中，进而使整个视图层发生相应的改变。而actions就是对用户的操作进行反应，当用户点击一个按钮的时候，会触发这个按钮相应的方法，这个方法在actions中通过commit也就是提交，提交给mutaions让他去做处理，mutaions中通过在里面写业务的逻辑使得state中相应的对象属性发生改变，也只能有这条路才能让state发生改变，如果是通过对象的方式如用‘$store.state.属性=某个值‘来改变state的值都是非法的，官方不推荐，虽然可行，但是会乱了逻辑。接下来我就用一个简单的demo来实现上述的过程。

        在本次demo中，为了让新手简单了解起见，我没像官方那样用多个js文件来管理各个模块，我将整个vuex的流程都写入一个store.js的文件中。下面一个是能通过点击按钮进行流加减的程序流程。

        首先肯定是创建一个vue项目，用指令来初始化一个vue-cli：

vue init webpack haha

        然后安装后npm的依赖：

npm install

        然后运行看看有没有问题：

npm run dev

        没有问题后安装vuex：

npm install vuex

        我们在src目录下新建一个store.js文件，里面写关于我们的vuex逻辑的代码：

        在main.js中我们要把store.js文件import进来，然后挂着在new Vue中：

import Vue from 'vue'import App from './App'import store from './store'Vue.config.productionTip = false/* eslint-disable no-new */new Vue({  el: '#app',  store,  render: h => h(App)})

        然后在store.js中引入vue和vuex，并且要在vue中使用vuex：

import Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)

        这个Vue.use()方法必不可少，因为vuex是插件，如果没有了这个方法去把vuex引入到vue中，则后面写的代码都无效。在这个store.js中，肯定会有我刚刚提到的state、actions、mutations和getters的，写法如下：

var state = {  }const actions = {  }const mutations = {  }const getters = {  }

        通常state变量是页面一开始加载的时候通过ajax等异步方法获取到的后台数据就放在state中，getters就是将state里的某些属性给到components那里进行渲染，actions是用户点击一个按钮触发一个方法时就要经过这个actions，actions里面通过commit让mutaions执行相应的方法，只有mutations才能改state！然后这四个变量和常量要导出去，通过Vuex.Store来导出去：

export default new Vuex.Store({  actions,  getters,  mutations,  state})

        在App.vue文件的template中，我是这样写的：

<template>  <div id="app">    <h3>简单计数器</h3>    <button @click="increment">+1</button>    <button @click="decrement">-1</button>    <div>now is {{count}}</div>  </div></template>

        这里有两个按钮，两个按钮对应着两个方法，一个是加1，另一个是减1，那么我们该如何实现呢？首先我们在下面的script中先引入vuex中的两个有用的方法：mapGetters和mapActions，这是vuex提供给我们的语法糖，通过你按照传统的方式写的话在methods里面写increment和decrement方法的实现，但是这里是vuex！这里有vuex自己的规则。在这里我们的methods是这样写的：

<script>import {mapGetters, mapActions} from 'vuex'export default {  name: 'app',  methods: mapActions([    'increment',    'decrement'  ]),  computed: mapGetters([    'count'  ])}</script>

        在mapActions中通过传入一个数组，里面有上面对应的两个方法名，传给store.js文件中进行处理。而我们想获取的参数count，通过计算属性computed里写入一个mapGetters方法，在该方法里传入count，就会在store.js方法里面进行处理，在store.js方法中通过getters返回该数值回来。下面我们就回到store.js，看看里面相应的变量和常量是如何写的。

        首先state里我们在里面设立一个属性，这个为count的原始值：

var state = {  count: 10}

        当用户点击按钮的时候，在actions中与之对应的方法就会commit该方法名给mutations，让mutations进行处理;

const actions = {  increment: ({commit}) => {    commit('increment')  },  decrement: ({commit}) => {    commit('decrement')  }}const mutations = {  increment: (state) => {    state.count++  },  decrement: (state) => {    state.count--  }}

        最后，当App.vue组件想要获取count的数值的时候，需要在getters里面返回：

const getters = {  count: (state) => {    return state.count  }}

        题外话。有同学说我可以不用按照官方的来做，比如下面这样做也可以达到相应的效果：

<script>// import {mapGetters, mapActions} from 'vuex'export default {  name: 'app',//  methods: mapActions([//    'increment',//    'decrement'//  ]),//  computed: mapGetters([//    'count'//  ])  data () {    return {      a: this.$store.state.count    }  },  methods: {    increment () {      this.a += 1    },    decrement () {      this.a -= 1    }  }}</script>

        在store.js文件中只需要state就可以了，看起来好像很简单啊。但是到需求量变的很大的时候，你这个方法无疑是搬起石头砸自己的脚。关键是这个不符合官方的规范！这个东西我已经在整篇文章提了三次，这个重要的东西值得说三次！

在官方那里除了我所提到的state、mutaions、actions、getters之外，还有一个modules。modules的功能就是分模块，在modules里面可以有state、mutaions、actions、getters，如果我们只是用那四个不用modules的话那么那四个相当于全局性的。在官方里modules的用法如下：

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 的状态

        那么我们如何利用这个modules来改写我们刚刚写的代码呢？跟着我一步一步来。

const moduleA = {  state: {    count: 10  },  actions: {    increment: ({commit}) => {      commit('increment')    },    decrement: ({commit}) => {      commit('decrement')    }  },  mutations: {    increment: (state) => {      state.count++    },    decrement: (state) => {      state.count--    }  },  getters: {    count: (state) => {      return state.count    }  }}export default new Vuex.Store({  modules: {    a: moduleA  }})

        仿照官方那样，记住一定要export导出去，不然App.vue那里就不能import了。还要提的一点是，当你要执行异步操作的时候，是在actions里面进行的而不是在mutaions里面。如果在mutaions里面执行异步操作的话会使整个逻辑比较乱。具体更多的细节请参考官方文档。