Vuex使用、辅助函数

CongJiYong

已于 2023-12-19 16:46:19 修改

阅读量111

点赞数

文章标签：前端 javascript html

于 2023-07-09 13:07:16 首次发布

本文链接：https://blog.csdn.net/congjiyong/article/details/131621701

版权

文章详细介绍了Vuex框架中管理状态的三种主要方式：State的访问（通过$store.state或计算属性），Mutation的使用（用于变更Store数据，只能通过commit触发），以及Action的处理（用于异步任务，通过dispatch触发并在内部commitMutation）。每种方式都提供了直接调用和映射为组件方法的两种方法，确保了数据流的控制和可追踪性。

摘要由CSDN通过智能技术生成

1.State

组件访问State中数据的第一种方式：

this.$store.state.全局数据名称

第二种方式：

// 1. 从 vuex 中按需导入
import {mapGetters} from "vuex"
export default{
//标签里面直接使用变量
  computed:{
	...mapGetters(["name","age","arr"]),
	//this.name  调用state变量
  }
}

第三种方式：

// 1. 从 vuex 中按需导入 mapState 函数
import { mapState } from 'vuex'
// 2. 将全局数据，映射为当前组件的计算属性
computed: {
  ...mapState(['count'])
}

2.Mutation

Mutation用于变更Store中的数据

只能通过mutation变更Store数据，不可以直接操作Store中的数据
通过这种方法虽然操作繁琐，但是可以集中监控所有数据的变化

 // 定义 Mutation
 const store = new Vuex.Store({
 state: {
   count: 0
 },
 mutations: {
   add(state) {
     // 变更状态
     state.count++
   }
 }
 })

触发 mutations 的第一种方式

 this.$store.commit('add')
 // 触发 mutations 时携带参数
 this.$store.commit('addN', 3)

触发mutations 的第二种方式

// 1. 从 vuex 中按需导入 mapMutations 函数
import { mapMutations } from 'vuex'
// 通过刚才导入的 mapMutations 函数，将需要的 mutations 函数，映射为当前组件的 methods 方法：
// 2. 将指定的 mutations 函数，映射为当前组件的 methods 函数
methods: {
 ...mapMutations(['add', 'addN'])
 //this.add() 调用
}

3.Action

Action 用于处理异步任务。
如果通过异步操作变更数据，必须通过 Action，而不能使用 Mutation，但是在 Action 中还是要通过触发Mutation 的方式间接变更数据。

// 定义 Action
 const store = new Vuex.Store({
 // ...省略其他代码
   mutations: {
     addN(state, step) {
       state.count += step
     }
   },
   actions: {
     addNAsync(context, step) {
       setTimeout(() => {
         context.commit('addN', step)
       }, 1000)
     } 
  }
})

第一种触发方式

 // 触发 Action
 // 在调用 dispatch 函数，
 // 触发 actions 时携带参数
 this.$store.dispatch('addNAsync', 5)

第二种触发方式

import {mapActions} from "vuex"
export default{
  methods:{
    //this.调用方法
    ...mapActions(["func1","func2"])
    ...mapActions("cate",["reqList"]), //命名空间
    //this.reqList()
    //console.log(this.$store.getters['cate/list'])
  }
}