vuex

Posted 2022-04-03 hzozj

背景

    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
)