vue2获取访问vuex分模块的数据

21、传统方法

this.$store.state['模块名']['属性名']

2、mapState方法:

import { mapState } from 'vuex'
computed: {
    // ...
    ...mapState({
      list: state => state.city.list
    })
  }

触发其他模块的action
1、

this.$store.dispatch('模块名/属性名', opts)
  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vuex 是一个专为 Vue.js 应用程序设计的状态管理模式,它提供了一种集中存储和管理应用组件共享状态的方式。在Vuex 4.0中,模块化是核心特性之一,使得状态划更加清晰,易于管理和维护。 模块数据获取主要有以下几个步骤: 1. **创建模块**(Modules):在 Vuex 中,你可以将状态、getter、action 和 mutations 离到不同的模块(modules)里。每个模块是一个对象,包含了这些状态管理相关的属性。 ```javascript export const userModule = { state: { userName: '' }, getters: { getUserInfo: state => state.userName }, actions: { setUser: ({ commit }, username) => commit('SET_USER', username) }, mutations: { SET_USER: (state, username) => (state.userName = username) } }; ``` 2. **导入模块**:在需要使用模块的地方,通过 `import` 引入,并在 store 中使用 `module.exports` 注册模块。 ```javascript import userModule from './modules/user' export default new Vuex.Store({ modules: { user: userModule } }) ``` 3. **使用模块**:在组件中通过 `mapState`, `mapGetters`, `mapActions`, 和 `mapMutations` 函数,访问和操作模块内的状态和方法。 ```javascript computed: { ...mapGetters(['getUserInfo']) }, methods: { async updateUser() { await this.$store.dispatch('user.setUser', 'New User'); } } ``` 4. **命名空间**:为了防止命名冲突,可以使用命名空间来组织模块,如 `auth` 或 `settings`。 ```javascript export const authModule = { // ... } // 在 store 中导入 import auth from './modules/auth' modules: { auth: auth, // ... } ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值