vuex

背景

    vue应用程序开发时，我们经常遇到如何在组件之间传值，父子组件传值可以用prop属性和emit事件来互相传递，但是兄弟组件呢？使用vuex是一种非常简单的方案。

vuex简介

vuex是vue的状态管理模式，用于管理状态，所谓状态可理解为data，需要共享传递的data，这些data在vuex内统一管理维护。

vuex对象

vuex内有五大对象，如下：

　　state：state内定义data，即变量，this.$store.data1。

　　mutations：用于修改状态，同步的，定义修改状态的方法，可以理解为java类的set方法，不允许直接操作state内的变量，this.$store.commit（“方法名”，param）。

　　actions:与mutations类似，不同的是它异步操作，mutations是同步操作，actions内可以提交mutations，不可以直接修改状态。this.$store.dispatch('actions内的方法'，参数)。actions内方法定义有两种，如下：

const actions = {
    actionsAddCount(context, n = 0) {
        console.log(context)
        return context.commit('mutationsAdd', n)
    },
    actionsReduceCount({ commit }, n = 0) {
        return commit('mutationsReduce', n)
    }
}

　　getters：计算属性，当state内属性变化时重新计算返回属性结果。官方文档解释为store的计算属性。也可以理解为所有组件的计算（computed）属性。

　　modules：这个适用于开发大型项目，需要很多不同类的状态分模块时使用的。

const moduleA = {
  state: { ... },
  mutations: { ... },
  actions: { ... },
  getters: { ... }
}

const moduleB = {
  state: { ... },
  mutations: { ... },
  actions: { ... }
}

如何使用

//安装vuex依赖，npm install vuex --save
//新建一个vuex的文件，建立一个vuex.js文件。

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

Vue.use(VueX)

const vuex = new VueX.store({
   state:{
     A:0     
   }
   mutations:{
     SET_A(state,n ){
      state.A = n
      state.A += n
    }     
   }
   actions:{
     actionA1({commit},n){
       return commit('SET_A',n)
    }
    actionA2(context,n){
       return commit('SET_A',n)
    }
   }
    getters : {
      getterA(state, n ) {
         return (state.A += n)
      }
    } 
})
export default vuex

//在vue实例内使用即可
new Vue({
　　vuex
})