vuex之state、actions、mutations

发布于2021-05-30 12:02 阅读(1469) 评论(0) 点赞(9) 收藏(3)

1、Vuex 是什么

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。

使用场景

在一个项目开发中频繁的使用组件传参的方式来同步data中的值，一旦项目变得很庞大，管理和维护这些值将是相当棘手的工作。
Vue为这些被多个组件频繁使用的值提供了一个统一管理的工具——Vuex

当多个组件需要操作到同一个数据的时候可以使用

核心概念

Vuex 的核心概念由五部分组成： State (存放状态)、Getter (加工state成员给外界)、Mutation (state成员操作，必须是同步函数)、Action (异步操作)和 Module (模块化状态管理)。

import { createStore } from 'vuex'

// 在store/indexjs创建一个新的 store 实例
import { createStore  } from 'vuex';
import getters from './getters'
import mutations from './mutations'
import actions from './actions'
import state from './state'
export default createStore({
    state,
    getters,
    mutations,
    actions
});

state

state为单一状态树，在state中需要定义我们所需要管理的数组、对象、字符串等等，

在组件中取


<template>
  <div class="test">
    {{ count }}
  </div>
</template>
<script>
 computed: {
    count () {
      return store.state.count
    }
 }   
</script>    
//* 每当 store.state.count 变化的时候, 都会重新求取计算属性，并且触发更新相关联的 DOM。

mapState 辅助函数

当一个组件需要获取多个状态的时候，将这些状态都声明为计算属性会有些重复和冗余。
所以我们可以使用 mapState 辅助函数来帮助我们生成计算属性:

<script type="text/ecmascript-6">
import {mapState} from 'vuex' //mapState 函数返回的是一个对象。
export default {
  name: "test",
  data() {
    return {
      
    };
  },
computed: {
    ...mapState(["count"]),
},

};
</script>

getter

Vuex 允许我们在 store 中定义“getter”（可以认为是 store 的计算属性）。就像计算属性一样，getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。

在getterjs文件中

export default {
  getCount(state,getters) {  //getters 可以获取到getter中的方法 比如getCount
    return state.count
  }
}

//获取 this.$store.getters.getCount

或者也可以通过mapGetters 辅助函数来获取

1.对象取别名的方式
...mapGetters({
  // 把 `this.getCount` 映射为 `this.$store.getters.getCount`
  getCount1: 'getCount'  
})
2.数组的方式
...mapGetters(['getCount'])

Mutation

是操作state数据的方法的集合，比如对该数据的修改、增加、删除

在mutationjs中调用

mutations: { 
    //这里是set方法
      changeCount(state,num) {
      // 变更count
        state.count += num.value
    }
  },

在组件中调用

1. this.$store.commit('changeCount',10)
   
2. this.$store.commit({
          type:'changeCount',
          value: 10
    })

Action

Action 类似于 mutation，不同在于：

Action 提交，需要借助mutation变更状态。
Action 可以包含任意异步操作。

在actionsjs中

changeCountAction(context,params) {
      setTimeout(() => {
        context.commit('changeCount',params.count)
      }, 2000) 
    }

使用

	// 以载荷形式分发
     this.$store.dispatch("changeCountAction",
      {
         count: 18
       });
    },
     
    // 以对象形式分发
      this.$store.dispatch({
        type: "changeCountAction",
        count: 18,
      });

一个 store.dispatch 在不同模块中可以触发多个 action 函数。在这种情况下，只有当所有触发函数完成后，返回的 Promise 才会执行。


// 假设 getData() 和 getOtherData() 返回的是 Promise
 
actions: {
  async actionA ({ commit }) {
    commit('gotData', await getData())
  },
  async actionB ({ dispatch, commit }) {
    await dispatch('actionA') // 等待 actionA 完成
    commit('gotOtherData', await getOtherData())
  }
}