vuex在Modules模块下之mapState,mapGetters,mapMutations,mapActions

文章介绍了Vuex的基础用法,包括无模块状态(state)和模块化状态管理。通过示例展示了如何在Vue组件中访问state,以及使用辅助函数mapState简化代码。此外,提到了项目结构中的不同情况,如无模块状态和模块化状态。

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

关于vuex的问题,我相信有很多小伙伴对他们是熟悉又陌生,熟悉的是写什么项目都能见到,陌生是因为有几天不用就忘了,所以针对这个问题,我给所有的小白新手特意出一期,包你看一遍就全懂了,如果有不懂的,下面留言。废话不多多说了,直接上代码。

咱们先说项目结构,一般会有两种情况:请看下面这段代码

import Vue from 'vue'
import Vuex from 'vuex'

import getters from './getters'

import app from './modules/app'
import master from './modules/master'
import order from './modules/order'

Vue.use(Vuex)
const state = {
  test: '这是测试数据'
}
const store = new Vuex.Store({
  modules: {
    app,
    master,
    order
  },
  getters,
  state
})

export default store

这段代码中,state就属于没有模块的状态,app,order,master就属于模块中的状态;兄弟,你看看你的属于哪一种情况然后再继续往下分;

我下面在写的时候,就把传统写法跟辅助函数写法都写一块了哈,大家直接做区分就可以了。

首先我们先获取state中的test(这种就属于没有Modules),在你的xxx.vue文件中这样写:

<template>
  <div>
    <span>{{ test }}</span>
  </div>
</template>

<script>
export default {
  computed: {
    test() {
      return this.$store.state.test
    }
  }
}
</script>

然后我们再用辅助函数进行写一遍:

<template>
  <div>
    <span>{{ test }}</span>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  computed: {
    ...mapState(['test']) // 如果有多个属性,也可以...mapState(['test', 'test1', 'test2'])
  }
}
</script>

state到这就差不多结束了,如果大家觉得哪里还不懂,非常欢迎积极补充。

今天有点晚了,先写到这里,为了叫大家更详细的看清楚,所以写的有点慢。明天继续更新。。。  各位看官见谅。

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值