vuex中mapState和mapActions

最新推荐文章于 2024-02-22 11:39:36 发布

累了要吃肉丶

最新推荐文章于 2024-02-22 11:39:36 发布

阅读量243

点赞数

分类专栏：前端学习文章标签： vue

本文链接：https://blog.csdn.net/qq_43610311/article/details/119648067

版权

前端学习专栏收录该内容

46 篇文章 2 订阅

订阅专栏

当有多个modules时

 modules: {
    app,
    settings,
    user,
    project
  },

使用 mapState

import { mapState, mapActions } from 'vuex'

这样就可以直接通过this.state获取出project模块中的state

computed: {
    ...mapState('project', {
      state: state => state
    })
  },
console.log(this.state)

同理 mapActions

methods: {
    ...mapActions('project', [
      'setDeviceList' action中的方法名 
    ]),
  }
  this.setDeviceList();调用方法

使用modules分模块要通过添加namespaced: true来通过命名空间对module进行区分

export default {
  namespaced: true,
  state,
  mutations,
  actions
}

区别，添加namespaced: true后在这里插入图片描述
不添加namespaced: true

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

累了要吃肉丶

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

vuex的mapState，mapGetters，mapActions，mapMutations与模块化

m0_58656423的博客

05-19

2477

vuex的mapState，mapGetters，mapActions，mapMutations与模块化

vuex：弄懂mapState、mapGetters、mapMutations、mapActions

qq_43237014的博客

04-25

484

一、state 1.1 引入vuex 以后，我们需要在state中定义变量，类似于vue中的data，通过state来存放状态 import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) export default new Vuex.Store({ state: { //存放状态 nickname:'Simba', age:20, gender:'男' }, mutations: {}, actions:

参与评论您还未登录，请先登录后发表或查看评论

Vuex辅助函数mapState、mapMutations和mapActions使用

qq_40007317的博客

08-18

1783

1、Vuex目录结构讲解这些属性之前，我们先看项目的store目录结构和主要代码： app/index/store/index.js代码： import Vue from "vue"; import Vuex from "vuex"; import mutations from "./mutations"; import actions from "./actions"; Vue.use(Vuex); const state = { userInfo:...

vuex中的mapState，mapGetters，mapActions以及mapMutations

热门推荐

清风了了的博客

06-04

3万+

// 在单独构建的版本中辅助函数为 Vuex.mapState import { mapState } from 'vuex' export default { // ... computed: mapState({ // 箭头函数可使代码更简练 count: state => state.count, // 传字符串参数 'count' 等同于 `state => state.count` countAlias: 'count', // 为

vuex映射属性详解mapState、mapGetters、mapMutations、mapActions、modules的使用(一)

theaaaheartbeat的博客

03-24

946

vuex映射属性详解 vuex的映射属性不要太爽了！！命名空间（牢记）官网介绍：模块内部的 action、mutation 和 getter 是注册在全局命名空间的——这样使得多个模块能够对同一 mutation 或 action 作出响应如果希望你的模块具有更高的封装度和复用性，你可以通过添加 namespaced: true 的方式使其成为带命名空间的模块。当模块被注册后，它的所有 getter、action 及 mutation 都会自动根据模块注册的路径调整命名。解释一

关于mapState，mapGetters,mapMutations,mapActions的学习笔记

Little_Pig_Bug的博客

09-04

9561

说白了mapState，mapGetters,mapMutations,mapActions 其实就是对state,gettters,mutations,actions的重命名而已。 1.mapState 他是对state的对象进行二次计算，他可以简化我们代码，这样我们获取cartList,不用写this.$store.state.cartList一大串了，尤其对于我们组件中用到次数挺多的情况...

vue3.0下如何使用mapState，mapGetters和mapActions

qq_16139383的博客

08-26

1万+

vue3.0下如何使用mapState，mapGetters和mapActions1、新建useMapper.js2、新建useState.js3、新建useGetters.js4、新建useActions.js5、页面中使用 vue2.0中使用mapState及mapActions的方式 // 使用mapState computed: { ...mapState({ //... }) } methods: { ...mapActions(['fnA', 'fnB']) } vue3.

vuex详解一：彻底弄懂state、mapState、mapGetters、mapMutations、mapActions

冰冰酱

03-24

3622

vuex的使用

VUE3.0,DAY59，vuex的mapState、mapGetters、mapActions、mapMutations

疯子的梦想@的博客

09-17

684

VUE3.0,DAY59mapState和mapGetters案例说明mapActions和mapMutations小结 mapState和mapGetters 案例说明我们使用求和案例，新加一个10倍求和的功能，其中mapstate和mapgetters起到帮我们取数据的作用。 //index.vue的代码 //该文件创建vuex中最为核心的store，为了管理vuex工作原理中的actions、mutations、state //引入vue import Vue from 'vue' //引入vue

Vuex辅助函数的使用（mapState、mapActions、mapMutations、mapGetters）

Mr-yang的随笔

07-13

921

本文章介绍vuex中辅助函数的使用，如果想学习vuex基础的小伙伴可以看上一篇文章~ 一、为什么需要使用辅助函数当一个组件需要对多个状态进行操作的时候，代码会有些重复和冗余，我们可以使用辅助函数帮助我们用极少的代码解决这些问题。注意：使用mapActions、mapMutations时需要在template中传参累加器案例 template代码：累加器:{{sum}} *100后={{sumHandler}} <br> <select v-model="num">

vuex 中的 state,mapState,...mapState对象展开符详解

yanzi_0216的博客

11-29

456

vuex 中的 state,mapState,…mapState对象展开符详解引入 Vuex 中的 mapState 函数，它可以将 state 中的属性映射到当前组件的计算属性中，然后就可以在当前组件中直接通过 this. 的方式来使用该属性 mapState作用：可以辅助获取到多个state的值怎么使用？ 1.在.vue组件中引入,在js块中引入 import { mapState } from 'vuex' 2.在.vue组件中定义一个对象将 state 中的值映射为计算属性，参数数组中

vuex里面的辅助函数mapState,mapGetters,mapMutations和mapActions用法

07-10

mapState: 这个辅助函数可以帮助我们在组件中映射 Vuex store 中的状态值。它接受一个数组或对象作为参数，用于指定我们想要映射的状态。当我们在组件中使用这个辅助函数时，它会返回一个计算属性对象，其中包含了我们所需的状态值。例如，假设我们有一个名为`count`的状态值，我们可以使用`mapState`辅助函数将其映射到组件中： ```javascript import { mapState } from 'vuex'; export default { computed: { ...mapState(['count']) } } ``` 现在，在组件中我们就可以直接使用`count`这个计算属性来访问 Vuex store 中的`count`状态值。 mapGetters: 这个辅助函数可以帮助我们在组件中映射 Vuex store 中的 getter 方法。它跟`mapState`的用法类似，接受一个数组或对象作为参数，用于指定我们想要映射的 getter 方法。同样，它也返回一个计算属性对象。例如，假设我们有一个名为`doubleCount`的 getter 方法，我们可以使用`mapGetters`辅助函数将其映射到组件中： ```javascript import { mapGetters } from 'vuex'; export default { computed: { ...mapGetters(['doubleCount']) } } ``` 现在，在组件中我们就可以直接使用`doubleCount`这个计算属性来访问 Vuex store 中的`doubleCount` getter 方法的返回值。 mapMutations: 这个辅助函数可以帮助我们在组件中映射 Vuex store 中的 mutation 方法。它也接受一个数组或对象作为参数，用于指定我们想要映射的 mutation 方法。不同于`mapState`和`mapGetters`，`mapMutations`返回的是一个对象，其中包含了我们所需的 mutation 方法。例如，假设我们有一个名为`increment`的 mutation 方法，我们可以使用`mapMutations`辅助函数将其映射到组件中： ```javascript import { mapMutations } from 'vuex'; export default { methods: { ...mapMutations(['increment']) } } ``` 现在，在组件中我们就可以直接调用`increment`方法来触发 Vuex store 中的`increment` mutation。 mapActions: 这个辅助函数可以帮助我们在组件中映射 Vuex store 中的 action 方法。它同样接受一个数组或对象作为参数，用于指定我们想要映射的 action 方法。类似于`mapMutations`，`mapActions`返回的也是一个对象，其中包含了我们所需的 action 方法。例如，假设我们有一个名为`fetchData`的 action 方法，我们可以使用`mapActions`辅助函数将其映射到组件中： ```javascript import { mapActions } from 'vuex'; export default { methods: { ...mapActions(['fetchData']) } } ``` 现在，在组件中我们就可以直接调用`fetchData`方法来触发 Vuex store 中的`fetchData` action。