vuex的使用

简单点说，
vuex在我目前浅显的理解来讲，是用来统一有效管理state状态的。

image.png

父组件和子组件之间传递数值，通常最常用的是props和$emit,但是如果这些状态，数据之间的关系和依赖越来越复杂的时候，就需要vuex来统一有效管理了。

安装

脚手架安装，$npm install vuex --save
在main.js中引入

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

一步一步来哈
为了方便维护管理，在src文件夹下新建文件夹store，在store中新建index.js文件

单一状态改变

store/index.js文件

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

export default new vuex.Store({
  state:{
    show:1
  }
})

parent.vue:

  <li>{{$store.state.show}}</li>

child.vue中：

 <i class="fa fa-close" @click="close"></i>
。。。
methods:{
  close: function (e) {
  this.$store.state.show = 2;
      }
}

当然li标签中就会变成2；

多个状态改变

比起在child.vue中写：

 <i class="fa fa-close" @click="close"></i>
methods:{
  close: function (e) {
  this.$store.state.show = 2;
  this.$store.state.show1 = 2;
  this.$store.state.show2 = 2; 
。。。。
      }
}

不如：
child.vue

 <i class="fa fa-close" @click="close"></i>
methods:{
  close: function (e) {
 this.$store.commit('switch_dialog');
      }
}

然后在store/index.js文件

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

export default new vuex.Store({
  state:{
    show:1，
   show1:2，
    show2:3
  }，
mutations:{
    switch_dialog:function (state) {
      state.show = 2;
     state.show = 3;
     state.show = 4;
    }
  }
})

这样就可以同时控制多个状态了
这里要注意的一点是，
1.mutations 中的方法是不分组件的 , 假如你在A文件中的定义了
switch_dialog 方法 , 在B文件中的一个 switch_dialog 方法 , 那么
$store.commit('switch_dialog') 会执行所有的 switch_dialog 方法。
2.mutations里的操作必须是同步的。
如果在 mutations 里执行异步操作会发生什么事情 , 实际上并不会发生什么奇怪的事情 , 只是官方推荐 , 不要在 mutationss 里执行异步操作而已。

更多的状态

如果有多个 mutations 触发，那就用actions管理这些 mutations啦
child.vue

 <i class="fa fa-close" @click="$store.dispatch('switch_dialog')"></i>

然后在store/index.js文件

export default {
    state:{//state
        show:false
    },
    mutations:{
        switch_dialog(state){//这里的state对应着上面这个state
            state.show = state.show?false:true;
            //你还可以在这里执行其他的操作改变state
        }
    },
    actions:{
        switch_dialog(context){//这里的context和我们使用的$store拥有相同的对象和方法
            context.commit('switch_dialog');
            //你还可以在这里触发其他的mutations方法
        },
    }
}