[ 转载！！！vuex]

先说一个常用的vue辅助工具vue-devtools安装教程。

一、什么是Vuex？为啥要使用它呢？

首先我们假设一个场景：当我们需要一个“常量”，在各个组件之间传播（或者是.vue文件中传播），父组件，子组件，孙组件等5层到6层。当用户打开几个窗口进行数据操作的时候，数据就可能被污染（大中型项目中常见）。这样我们就需要一个控制中心（我叫它“核心前端数据库”）的东西——这也vuex中的store（仓库），它把所有公用的数据和方法，当有“人”要改的时候，就得来我这里修改。

二、简单的demo

1. 新建store.js用来管理状态（也就是vuex）。

/* 仓库文件 */import Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex);const state = { //一般通过外部文件引入的，东西很多的。  //定义数据 --- 类似data  num: 12  //生成了一个静态的常量}const mutations = {  //定义方法 --- 类似methods  add(state){//state 是把上面的数据引入进来的    state.num++;  },   minus(state){     state.num--;   }}export default new Vuex.Store({  state,  mutations});

2. 在入口文件main.js中引入

import Vue from 'vue'import store from './store/store.js' //全局中引入vueximport App from './App.vue'new Vue({  el: '#app',  store,  render: h => h(App)})

3. 在相关组件中使用（此处是App.vue）

<template>  <div id="app">    {{ $store.state.num }}  &lt;!-- vue静态的常量   --&gt;  &lt;!-- $store是共有的意思 -->    <div class="">      <button type="button" name="buttonAdd" @click="$store.commit('add')">加一个</button><!-- vue2.0  的写法 -->      <button type="button" name="buttonAdd" @click="$store.commit('minus')">减一个</button>    </div>  </div></template>

所有.vue文件操作数据的时候都用这种方法就不会讲数据弄混了。
vue-devtools中的vuex对事件的监测，当我们进行操作的时候就会有记录相关信息。

继续学习请点击

本文github地址
首先我问看下完整的Vuex选项对象

new Vuex.Store({  state,  //访问状态对象  mutations,  //访问触发状态  getters,  actions});//还有一个模块的export default new Vuex.Store({  modules:{    a:moduleA  }});

一、 state — 访问状态对象

说明：也就是使用vuex中的数据
1. 直接在组件中使用{{ $store.state.num }}
2. 需要使用数据的组组件（此处是App.vue）中的计算属性

a. 方式一

computed: {    count(){      return this.$store.state.num + '：方式一获取的state数据';//this指的是main.js中的vue实例对象    }  }

b. 方式二，利用mapState

  import {mapState} from 'vuex'  computed:mapState({    // es箭头函数写法，好处箭头函数中的this有穿透效果，直接是上上级    // count: state => state.num + '：方式二获取的state数据'    // es5写法    count:function (state) {      return state.num + '：方式二获取的state数据'    }  })

c. 方式三,不对数据进行计算（加工处理），当数据较多的时候,数组形式

  computed:mapState([    'counut'//这里必须state中的数据和此模板中的数据一个名字，也就类似组件定义的简写  ])

d. 方式四,不对数据进行计算 ，当数据较多的时候,json形式

推荐

  computed:mapState({     count:'num'  })

效果如下图：

二、 Mutations— 触发状态

说明：必须用commit触发mutations中的方法
需求：在组件中传入一个值给store.js

<button type="button" name="buttonAdd" @click="$store.commit('add',{a:10})">加一个</button>const mutations = {  //定义方法 --- 类似methods  add(state,n){//state 是把上面的数据引入进来的    console.log(n);//传入的第二参数的那个对象    state.num+= n.a;  }}

1. 利用mapMutations引入sotre中的触发状态

<button type="button" name="buttonAdd" @click="add({a:10})">map=>加一个</button><!-- 传值的话只需要在括号里传，但要注意格式 -->      <button type="button" name="buttonAdd" @click="minus">map=>减一个</button>import {mapMutations} from 'vuex'//因为方法所以写在组件中的methods中 methods:mapMutations([     'add',     'minus'   ])

三、 getters — 获取者

注意：在vue2.x中的computed中不要使用箭头函数，因为箭头函数中的this指的是上一层不是本层。

//组件中import {mapGetters} from 'vuex'computed:{    /*count(){      return this.$store.getters.num    }*/    //map对象方式获取getters    ...mapGetters({      count:'num'//引进是静态的    })  },//store.js文件中const getters = {  num:function (state) {    return state.num;  }}export default new Vuex.Store({  state,  mutations,  getters});

注意：..mapGetters({})使用了三个点“…”，由于vue-cli生成的依赖包中不能解析此语法，所以需要进行如下配置。

1. npm install babel-preset-stage-2 –save-dev
2. 在.babelrc文件中加一个配置

   ["stage-2"]

四、 actions — 异步状态

和Mutations的区别是Mutations是同步状态，Actions是异步状态，可以调用Mutations中的状态，异步的批处理的一个集合。

//组件中<button type="button" name="buttonAdd" @click="addPlus">addPlus =>加二个</button>      <button type="button" name="buttonAdd" @click="minusPlus">minusPlus</button>import {mapActions} from 'vuex' methods:{     ...mapMutations([       'add',       'minus'     ]),     ...mapActions([       'addPlus',     ]),     ...mapActions({       minusPlus:'minusPlus'     })   }//store.js中const actions = {  addPlus(context){//context代表了整个的store    context.commit('add',{a:2}); //每次加2    setTimeout(()=>{        context.commit('minus');    },3000)    console.log('Actions中的加');  },  minusPlus({commit}){//commit    commit('minus')  }}export default new Vuex.Store({  state,  mutations,  getters,  actions});

五、 module — 模块化

当 state, mutations, getters,actions太多的时候，我们就需要分成不同组别的模块组。

//组件中  A模块组中的num => {{  $store.state.a.numA }}   B模块组中的num => {{  $store.state.b.numB }}//store.js中const moduleA ={  state: {    numA: 888  }}const moduleB ={  state: {    numB: 666  }}export default new Vuex.Store({  modules:{    a:moduleA,    b:moduleB  }});

最终demo如下图：

作者：datura_lj
链接：http://www.jianshu.com/p/0fcdf380afe7
來源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。