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
})
原文地址:https://www.cnblogs.com/hzozj/p/11167703.html