vuex 简单的理解

dogface07

已于 2022-07-08 10:50:44 修改

阅读量205

点赞数

文章标签：大数据

于 2022-07-08 10:25:22 首次发布

本文链接：https://blog.youkuaiyun.com/panfu163/article/details/125673207

版权

本文介绍了Vuex中的关键概念：mutations用于同步更新状态，actions负责异步操作并触发mutations，getters则用于计算属性并缓存结果。示例展示了如何创建state、mutations、actions和getters，并解释了Vue中使用$store.commit和$store.dispatch的区别以及在模板中调用的方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.创建对像
const state = {
        // 存放字典集，以key为健存储
        dictionaries: {
          root: {},
          page: {}
        },
        dictionary:'', //获取字典
        // 缓存请求结果，以url|uri为健存储
        allDictRequestCache: {}
}

2.mutations可以直接修改state存放方法
const mutations = {
    SET_CACHE: (state, cache) => {
        state.allDictRequestCache = cache
    }

3.actions是用来触发mutations的它无法直接改变state，它可以包含异步操作，它只能通过store.dispatch触发*通过commit去执行mutations的方法
const actions = {
async pull (){}
}

export default {
   namespaced: true, //此属性是避免module属性与其他的module属性导出的state等内含属性重复报错所加
   state,
   mutations,
   actions
}

4. getters注册在全局的命名空间
this.$store.getters['ec/dict/dictionary']
const getters = {

dictionary (state) {}

}

Vue中this.$store.dispatch() 与 this.$store.commit()

1、commit: 同步操作
* this.$store.commit('方法名',值)【存储】
* this.$store.state.方法名【取值】
2、dispatch: 异步操作
* this.$store.dispatch('方法名',值)【存储】
* this.$store.getters.方法名【取值】

模板中vue中调用

import { mapActions, mapState } from "vuex";

...mapActions(["checkSatId"]),