VUEX 方法调用常用的几种方式和简写 mapState，mapMutation，mapAction

最新推荐文章于 2022-11-18 15:25:59 发布

CJamenc

最新推荐文章于 2022-11-18 15:25:59 发布

阅读量823

点赞数 1

CC 4.0 BY-SA版权

分类专栏： vue vuex vuex核心使用方法文章标签： javascript css vue.js html html5

本文链接：https://blog.youkuaiyun.com/CJamenc/article/details/109463784

vue 同时被 3 个专栏收录

7 篇文章

订阅专栏

vuex

3 篇文章

订阅专栏

vuex核心使用方法

2 篇文章

订阅专栏

本文介绍了Vuex的状态管理，包括State作为全局数据源，Getters用于修饰State但不改变它，Mutation是修改State的唯一途径，Action处理异步操作并最终调用Mutation。此外，还提到了使用module模块化管理以及mapState、mapMutation和mapAction的简写方式来简化组件与Vuex的交互。

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

State

提供全局唯一的公共数据源

访问全局状态的两种方法

1. 使用  this.$store.state.xxxx
2. 使用辅助函数的方法去访问，  mapState
	在组件里面定义计算属性的方式   ...mapState(['count'])   这句话的意思就是将 state上面的值映射为当前组件的 计算属性

Getters

主要是堆state里面的数据有一个包装或者修饰的作用，并不会改变state上面原始的数据；类似于vue里面的计算属性

使用方式  this.$store.getters.xxx
使用辅助函数的方式   直接在页面上使用这个技术属性， 但是要现在页面里面定义  mapGetters(['xxx'])

Mutation

全局的数据，使用的方式，显示的方式是 this.$store.state.count
如果要对store里面的数据进行修改，比如我们有10个组件，都访问这个数据，有5个组件想修改这个公共的数据 this.$store.state.count ++
在工作里面，我们对与stroe上面的数据逇更改，一定要交给唯一的一个全局功能的函数，卸载mutation里面
在组件里面，怎么样去修改全局的状态值 this.$store.commit(‘写我们定义的方法名称’)
在vuex里面，修改全局数据唯一的方法就是提交 mutation

Action

对于异步的数据的操作，mutation处理不了，只能选择action

但是最终的action里面，要修改数据，还是要调用mutation里面的函数

在action 的函数里面，这样写我们的异步函数
fnAsync(context){
    setTimeout(()=>{
        // 在这个里面再滴哦阿勇mutation去修改我们的额 state上面的值
        context.commit('提交一个mutation')
    }, 1000)
}

// 上面是定义action的地方； 在组件里面调用action
this.$store.dispatch('ation的名称')

module模块

常用的几种方式和简写 mapState，mapMutation，mapAction

访问数据  this.$store.state.count
辅助函数简写 this.count --------- 必须先计算属性computed定一个辅助函数 mapState(['count'])

同步修改数据
修改数据是  this.$store.commit("mutation里面函数的名称")
辅助函数简写  this.函数名称() --- 必须在methods里面  定一个辅助函数  mapMutation(['函数名称'])

异步修改数据
修改数据  this.$store.dispatch("action里面定义的方法")
辅助函数简写  this.函数名称()  ---- 必须要在methods 定义一个辅助函数  mapAction(['函数名称'])