vuex - Module - 访问命名空间里的state、actions、mutations、getters的方式

最新推荐文章于 2022-11-25 09:03:41 发布
最新推荐文章于 2022-11-25 09:03:41 发布
阅读量2.4k 收藏 17
点赞数 7
分类专栏： web-vue 编码技巧 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46873254/article/details/119781316
版权

vuex - Module - 访问命名空间里的state、actions、mutations、getters的方式

1. vuex

1.1. 作用

  • 用来统一管理项目的状态(公用数据)

1.2. 成员及作用

  1. state: 存储状态
  2. getters: state的计算属性
  3. mutations: 修改状态(同步操作)
  4. actions:修改状态(异步操作)
  5. modules: 数据模块化


2. 模块（module）说明

注: 本小节内容来源官网
由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。

为了解决以上问题，Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割：

const moduleA = {
  namespaced: true,  //区分和其他模块及主模块中的内容,防止冲突
  state: () => ({ ... }),
  mutations: { ... },
  actions: { ... },
  getters: { ... }
}

const moduleB = {
  namespaced: true,  //区分和其他模块及主模块中的内容,防止冲突
  state: () => ({ ... }),
  mutations: { ... },
  actions: { ... }
}

const store = new Vuex.Store({
  modules: {
    a: moduleA,
    b: moduleB
  }
})

store.state.a // -> moduleA 的状态
store.state.b // -> moduleB 的状态

虽然模块化的引入, 有利于vuex中对状态和函数的维护和开发, 但与之带来的还有获取上的困扰, 以下内容为获取各配置项中内容的讲解.


3. 要点及注意点

3.1. namespaced: true

  • 保证内部模块的高封闭性;
  • 默认情况下，模块内部的 action、mutation 和 getter 是注册在全局命名空间的, 可以直接调用, 但是很容易和其他子模块及主模块中, 同名状态或者函数发生冲突, 在子模块的配置项目中, 必须添加 namespaced: true 属性, 区分和其他模块及主模块中的同名状态或者函数, 防止冲突;
  • 后面需要访问子模块中的内容就需要带模块名.

3.2. 辅助函数写在哪里?

  • 针对于各配置项, 共有四个辅助函数, 用于访问命名空间里的内容, mapState, mapMutations, mapActions, mapGetters,
    • mapState, mapGetters , 中存的是状态(数据), 因此在子组件的计算属性 computed 中使用;
    • mapMutations, mapActions中存的是函数, 因此在子组件的 methods 使用;


4. 演示代码概览

在这里插入图片描述

  • user子模块不做获取演示, 仅仅为了体现子模块


5. state

  • 获取order子模块中的 price:'998’

5.1. 全局变量获取和辅助函数获取

  1. 全局变量之 - 插值表达式获取
    • 格式: $store.state.模块名.模块属性
    • 实现代码: $store.state.order.price
  2. 全局变量之 - 计算属性获取
    • 和上一个相同, 仅仅写在计算属性中, 前面加一个this
    • 实现代码: this.$store.state.模块名.模块属性
  3. 辅助函数 - 数组形式
    • 格式: ...mapState('模块名', ['属性名'])
    • 实现代码: …mapState(‘order’, [‘price’])

5.2. 代码总结

<template>
  <div>
    <h1>modules</h1>
    <pre>
      <!-- 获取order中的价格 "998" -->
      1.1 全局变量之 - 插值表达式获取   
      {{ $store.state.order.price }}

      1.2 全局变量之 - 计算属性获取   
      {{ myPrice }}

      1.3. 辅助函数之-数组形式        
      {{ price }}               

    </pre>
  </div>
</template>
<script>
import { mapState } from 'vuex'
export default {
  name: 'modules',

  computed: {
    myPrice(){
      return this.$store.state.order.price 
    },
    ...mapState('order', ['price'])
  }
  
}
</script>

5.3. 实际开发的中主模块中使用getters-快捷访问

实际开发中, 以上方式较少用, 一般来说子模块中state里的数据, 都会在主模块中的getters写好, 方便获取
在这里插入图片描述


6. actions

6.1. 全局变量获取和辅助函数获取

  1. 全局变量获取

    1. 格式: this.$store.dispatch('模块名/actions中的方法名', '实参')
    2. this.$store.dispatch(‘order/editTxt’, ‘跳楼大甩卖’)

  2. 赋值函数 - 数组形式

    1. 格式:

      methods:{
	// 获取方法
	...mapActions(['模块名/actions中的方法名'])
	
	//  调用
	this['模块名/actions中的方法名'](实参)
}

    2. 代码实现

      methods:{
	...mapActions(['order/editTxt']),

 	this['order/editTxt']('优惠大酬宾')
}

  3. 赋值函数 - 对象形式

    1. 格式:

      methods:{
	...mapActions({
		 aaa: '模块名/actions中的方法名'
	 }),
	
	//  调用
	this.aaa(实参)
}

    2. 代码实现

      methods:{
	...mapActions({
		aaa: 'order/editTxt'
	}),
	
 	this.aaa('大大促销')
}


6.2. 代码总结及操作演示

  • vuex子模块中定义:
const state = {
    price:'998',
    num:9999,
    desc:{
        txt:'便宜实惠!'
    }
}
const actions = {
    editTxt(context, payload){
        context.commit("editTxt", payload)
    },
}
const mutations = {
    editTxt(state, payload){
        state.desc.txt = payload
    }
}
const getters = {}

export default {
    namespaced: true,
    state,
    actions,
    mutations,
    getters
}
  • 组件中使用:
<template>
  <div>
    <h1>modules</h1>
    <pre>
      3.actions                        <br>
     desc: {{ $store.state.order.desc.txt }}

      <button @click=clk1>
        把desc'便宜实惠!'改成'大大促销'
      </button>

      <button @click=clk2>
        把desc'便宜实惠!'改成'跳楼大甩卖'
      </button> 
        
      <button @click=clk3>
        把desc'便宜实惠!'改成'优惠大酬宾'
      </button>  </pre>
  </div>
</template>

<script>
import { mapActions } from 'vuex'
export default {
  methods: {
    ...mapActions({
      aaa: 'order/editTxt'
    }),
    clk1 () {
      this.aaa('大大促销')
    },
    clk2 () {
      this.$store.dispatch('order/editTxt', '跳楼大甩卖')
    },
    ...mapActions(['order/editTxt']),
    clk3 () {
      this['order/editTxt']('优惠大酬宾')
    }
  }
}
</script>

操作演示:
ddd

7. mutations

7.1 全局变量和辅助函数获取

  1. 全局变量获取

    1. 格式: this.$store.commit('模块名/actions中的方法名', '实参')
    2. this.$store.commit(‘order/editTxt’, ‘跳楼大甩卖’)

  2. 辅助函数获取
    mutations的辅助函数是mapMutations, 辅助函数的使用方式和actions一致, 不做赘述

7.2 代码总结

  • vuex子模块中定义:
const state = {
    price:'998',
    num:9999,
    desc:{
        txt:'便宜实惠!'
    }
}
const actions = {}

const mutations = {
    editNum(state, payload){
        state.num = payload
    }
}
const getters = {}

export default {
    namespaced: true,
    state,
    actions,
    mutations,
    getters
}
  • 组件中使用:
<template>
  <div>
    <h1>modules</h1>
    <pre>
      mutations
        num9999 --> {{$store.state.order.num}}

        1.全局变量
        <button @click=clk1>把num'9999'改成'1111'</button>
        2.辅助函数-对象
        <button @click=clk2>把num'9999'改成'2222'</button>
        2.辅助函数-数组
        <button @click="clk3 ">把'9999'改成'3333'</button>
      </pre>
  </div>
</template>

<script>
import { mapMutations } from 'vuex'
export default {
  methods: {
    ...mapMutations({
      ccc: 'order/editNum',
    }),
    ...mapMutations(['order/editNum']),
    clk1(){
      this.$store.commit('order/editNum',1111)
    },
    clk2(){
      this.ccc(2222)
    },
    clk3(){
      this['order/editNum'](3333)
    }
  }
}
</script>


8. getters

注意:

  1. vuex中的getter , 可以认为是 store 的计算属性 。就像计算属性一样，getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。
  2. 实际开发中, 并不会使用子模块的getters, 因为它的存在本来就是给开发者提供快捷访问, 简化编码, 只有写在主模块中才能满足设计getters的出发点。

8.1 全局变量获取和辅助函数获取

  1. 全局变量获取
    1. 格式: $store.getters['模块名/getters中的属性名']
    2. 代码实现: $store.getters[‘order/customTxt’]

  2. 辅助函数获取
    1. 格式:

    computed: {
	...mapGetters({
		myTxt: '模块名/getters中的属性名
	}),
}

8.2. 代码总结

  • vuex子模块中定义
const state = {
    price:'998',
    num:9999,
    desc:{
        txt:'便宜实惠!'
    }
}
const actions = {}

const mutations = {}
const getters = {
    customTxt(state){
        return state.desc.txt
    }
}

export default {
    namespaced: true,
    state,
    actions,
    mutations,
    getters
}
  • 组件中使用
<template>
  <div>
    <h1>modules</h1>
    <pre>
        desc:便宜实惠! --> {{$store.state.order.desc.txt}}
        
        getters
        方式一:全局变量  {{ $store.getters['order/customTxt'] }}
        方式一:辅助函数  {{ myTxt }}
      </pre>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  computed: {
    ...mapGetters({
      myTxt: 'order/customTxt'
    }),
  }
}
</script>
SpringSir
关注
  • 7
    点赞
  • 踩
  • 17
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vuex -访问（modules）模块中的 state & mutations & actions & getters
Forever_Hopeful的博客
09-11 839
Vuex -访问（modules）模块中的 state & mutations & actions & getters
vuex的命名空间
Zhooson的博客
04-27 2649
vuex的命名空间
【vuex --命名空间】
shfjcncjn的博客
09-21 346
vuex五大核心 vuex四大辅助函数 modules模块划分--开启命名空间
vuex在模块中getters和actions命名重复会冲突，用命名空间即可解决
qq_24882601的博客
05-29 5313
最近在做项目的时候，用了vuex的模块化模式，一开始没有什么问题 ，但是写到后面发现就出现问题了，打开控制台，发现这样的错误；百度之后发现是模块里面的getters方法的名字和根store里面的getters方法名字重复了。所以会报这样的错误，不仅仅是getters方法名字重复会报错，如果actions的名字也重复的话，那么这个action会执行多次，这就不是我们想要的效果了 ...
vuex的模块化与命名空间
dyy_csdn的博客
01-10 772
vuex项目是一直在使用，但是当系统业务需求增加，需要维护的状态越来越多时，就会难以管理，这时就考虑将store模块化（module)，每个模块都会拥有自己的 state、mutation、action、getter 基本使用 1、在项目中的 store 文件夹下新建一个文件夹 modules 2、在modules文件夹中先定义两个模块，AModule,BModule Amodule/index.js const AModule = { state: () => ({ use
vuex-module.zip
06-15
模块化是Vuex的一个强大特性，允许我们将状态、mutation、action 和 getter 分解到不同的模块中，每个模块都有自己的状态空间。这样做的好处在于提高了代码的可维护性和组织性。创建模块时，我们可以在`store`目录下...
Vuex-todo-Mo
03-04
vuex-module-decorators**：如果项目使用了 TypeScript，可能还引入了 `vuex-module-decorators`，这是一个用于在 TypeScript 中编写 Vuex 模块的库，它提供了装饰器以便更方便地定义 state、mutations、actions 和 ...
Vue-Router-Vuex-Composition-api-Typescript
03-09
在Vue-Router-Vuex-Composition-api-Typescript项目中，这些技术的结合使得开发更高效、更可维护。通过Vue Router处理页面导航，Vuex管理全局状态，Composition API提升组件代码组织，以及TypeScript增强类型安全性...
浅谈super-vuex使用体验
08-27
Super-Vuex 使用体验详解 Super-Vuex 是一种用于简化 Vuex 的数据架构解决方案。Vuex 是一个常用的状态管理工具，但是在实际应用中存在一些问题，如数据共享、业务接口分离、数据模块化管理等。Super-Vuex 正是为了...
深入理解Vuex 模块化(module)
08-29
如果你在moduleA和moduleB里分别声明了命名相同的action或者mutation或者getter， 当你使用store.commit('some')，A和B模块会同时响应。为了解决这个问题，可以添加namespaced: true的方式，使其成为命名空间模块。 ...
Vuex模块化+命名空间
m0_50832030的博客
03-19 331
1、目的：让代码更好维护，让多种数据分类更加明确 2.、store.js文件中配置命名空间 const countAbout = { namespaced:true,//开启命名空间 state:{x:1}, mutations:{ ... }, actions:{ ... }, getters:{ bigSum(state){ return state.sum*10; } } } const p
vuex的命名空间有哪些_Vuex模块：开启命名空间
weixin_39806065的博客
12-20 563
模块开启命名空间后，享有独自的命名空间。{"模块1":{state:{},getters:{},mutations:{},actions:{}},"模块2":{state:{},getters:{},mutations:{},actions:{}}}mapState、mapGetters、mapMutations、mapActions第一个参数是字符串(命名空间名称)，第二个参数是数组(不需要重命...
vuex getters
夜阑珊妖妖
08-13 1019
相当于计算属性，修改state中的数值，但不改变state原本的数值。 export default new Vuex.Store({ state:{ studentList:[] }, getters:{ newStudent(state){ return state.studentList.map((item, index) => { if(index == ...
vuex 命名空间的使用
最恨不过不努力
02-01 3727
vuex 命名空间的使用 废话不多说，直接上代码 // store 文件下的index.js import city from './module/city' import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) export default new Vuex.Store({ modules: { city } })...
vue---vuex中modules中action如何调用state、兄弟模块state、根state，以及调用相关action、mutation，getters?
热门推荐
Wbiokr的博客
06-13 3万+
vuex中modules可以将项目state进行分块，互补干扰。那么在单个module中，action如何调用其他module中action或者根action/mutation/state？ 打印action参数： const actions={ editName(options,payload){ console.log(options) } } 运行editName方法...
【vuex使用命名空间分模块后,实现获取state的值】
qq_37312180的博客
11-25 1725
【代码】【vuex使用命名空间分模块后,实现获取state的值】
vuex的 module 除了state其他的都合并
10-23 922
http://blog.csdn.net/rvrnld5t/article/details/55254795
Vuex组件访问State中数据的两种方式
xwaxy_的博客
07-28 1567
//创建store数据源，提供唯一公共数据 const store = new Vuex.store({ state: { num:0 } }) 第一种方式 this.$store.state.全局数据名称 第二种方式 //在需要使用的组件里，从Vuex中按需导入mapState函数 import { mapState } from 'vuex' //通过刚才导入的mapState函数，将当前组件需要的全局数据，映射为当前组件的computed计算属性。 c.
vuex（二）getters配置项&mapState与mapGetters&mapActions与mapMutations &vuex模块化+namespace
weixin_47687315的博客
03-17 703
1.getters配置项 *当state中的数据需要经过加工后再使用时，可以使用getters加工。 2.mapState与mapGetters * mapState与mapGetters的作用：简化代码，帮助生成代码：$store.state.xxx和$store.getters.xxx *引入mapState与mapGetters *使用： 3.mapActions与mapMutations 4.vuex模块化+namespace *目的：让代码更好维护，让多种数据...
vuex开启命名空间
最新发布
09-24
在Vuex中开启命名空间非常简单。只需在模块定义时添加`namespaced: true`即可开启命名空间。例如，假设你有一个名为`user`的模块，你可以这样定义它的命名空间： ```javascript const user = { namespaced: true, state: { ... }, mutations: { ... }, actions: { ... }, getters: { ... } } ``` 在开启了命名空间的模块中，你可以使用`modulePath`选项来获取模块的命名空间路径。例如，如果你有一个名为`getUserInfo`的getter，你可以使用`modulePath`来获取它的路径： ```javascript this.$store.getters['user/getUserInfo'] ``` 这样就可以避免不同模块之间的命名冲突，更好地组织和管理你的Vuex代码。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值