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

最新推荐文章于 2024-09-14 18:52:39 发布

原创最新推荐文章于 2024-09-14 18:52:39 发布 · 780 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #vue.js #前端 #vue

文章介绍了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到这就差不多结束了，如果大家觉得哪里还不懂，非常欢迎积极补充。

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