Vuex 命名空间 namespaced的使用

在项目中，如果需要用到Vuex，可以将 store 分割成多个模块（module），每个模块拥有自己的 state、mutation、action、getter，这样你的模块具有更高的封装度和复用性，此时就用到了命名空间这个概念。（ 默认情况下，模块内部的 action、mutation 和 getter 是注册在全局命名空间的，这样使得多个模块能够对同一 mutation 或 action 作出响应。）

1.如何使模块成为一个命名空间模块？

你可以在单个模块中通过添加namespaced：true的方式使其成为带命名空间的模块。

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

2.组件中如何获取带有命名空间moduleA中的state数据？

1、基本方式：
    this.$store.state.moduleA.countA
2、mapState辅助函数方式：
    ...mapState({
        count:state=>state.moduleB.countB
    })
【例子】
 computed:mapState({
  //  将state中的商品列表数据作为goodslist的属性
  goodslist:state=>state.goods.list
 }),

组件中调用命名空间模块中的getters

computed:{
    // 使用扩展运算符“...”,将mapState和mapGetters返回的结果放到计算属性中
  ...mapState({
    // 绑定购物车中的商品
    items:state=>state.shopcart.items
  }),
  // 绑定购物车中的商品总价
  ...mapGetters('shopcart',{total:'totalPrice'})
},

到此这篇关于Vuex 命名空间 namespaced的使用的文章就介绍到这了,更多相关Vuex 命名空间 namespaced内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 浅谈Vue初学之props的驼峰命名

    在vue的中文官网有这样的说明:HTML 中的特性名是大小写不敏感的,所以浏览器会把所有大写字符解释为小写字符.这意味着当你使用 DOM 中的模板时,camelCase (驼峰命名法) 的 prop 名需要使用其等价的 kebab-case (短横线分隔命名) 命名. 重申一次,如果你使用字符串模板,那么这个限制就不存在了. 以以下代码为例: 1.当组件中template及props等使用驼峰式命名,在html中对应的改成短横线命名方式. 2.当组件中template及props等使用字符串模板

  • vue组件命名和props命名代码详解

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>Examples</title> <script src="https://cdn.jsdelivr.n

  • Vue3中props和emit的使用方法详解

    目录 作用:父组件通过 props 向下传递数据给子组件: 用法1(不指定类型的简单接受): 用法2(接受同时进行类型限制): 用法3(接受同时类型限制+默认值指定): 注意: emit的使用 总结 作用:父组件通过 props 向下传递数据给子组件: 用途:当有一种类型的组件需要被使用多次,每一次的调用都只是特定的地方不同,就好像一张个人简介表,每次填的人的信息都不同,但是结构都是一样的. 用法1(不指定类型的简单接受): 在父组件里面引入子组件,通过子组件的标签属性传递参数,在子组件里面定义

  • Vue中props组件和slot标签的区别

    在 Vue 中,props 和 slot 都是组件之间进行通信的机制,它们的作用和应用场景有一些区别: props 是一种组件的数据传递机制,通过在父组件中以属性的形式向子组件传递数据.子组件接收这些数据,并可以进行相应的处理和渲染.props 在组件开发中非常常见,可以让我们更加方便和灵活地进行组件间的数据传递. slot 是一种插槽机制,用于在组件内部放置一些用户自定义的内容或者组件.通俗来说,可以把 slot 看成是组件内部的一个容器,可以在组件使用时向其中动态插入内容. slot 可以用

  • Vuex模块化和命名空间namespaced实例演示

    Vuex模块化和命名空间namespaced实例演示

    1. 目的: 让代码更好维护,让多种数据分类更加明确. 2. 修改store/index.js store/index.js const countAbout = { namespaced:true,//开启命名空间 state:{x:1}, mutations: { ... }, actions: { ... }, getters: { bigSum(state){ return state.sum * 10 } } } const personAbout = { namespaced:tru

  • vuex命名空间的使用

    vuex命名空间的使用

    目录 Vuex由于使用单一状态树,应用的所有状态会集中到一个比较大的对象.当应用变得非常复杂时,store 对象就有可能变得相当臃肿. 因此,Vuex 允许我们将 store 分割成模块(module),每个模块拥有自己的 state.mutation.action.getter.甚至是嵌套子模块. 默认情况下,模块内部的 action.mutation 和 getter 是注册在全局命名空间的,这样使得多个模块能够对同一 mutation 或 action 作出响应.如果希望你的模块具有更高的

  • 深入理解Vuex 模块化(module)

    一.为什么需要模块化 前面我们讲到的例子都在一个状态树里进行,当一个项目比较大时,所有的状态都集中在一起会得到一个比较大的对象,进而显得臃肿,难以维护.为了解决这个问题,Vuex允许我们将store分割成模块(module),每个module有自己的state,mutation,action,getter,甚至还可以往下嵌套模块,下面我们看一个典型的模块化例子 const moduleA = { state: {....}, mutations: {....}, actions: {....},

  • vue+vuex+json-seiver实现数据展示+分页功能

    一丶项目分析 1.UI: 2.接口信息: 二丶项目环境 Mockjs:生成模拟数据(含中文名,以及地址) json-server:模拟后端接口 webpack-dev-server:开启服务器环境+接口代理 jquery:使用jquery的ajax拉取数据 vue+vuex:vuex负责数据交互,vue渲染页面 iviewui:ui组件,方便布局 搭建开发环境 1.基本环境 Vue起步(无cli) 安装: npm install --save Mockjs 使用: 详细API:mockjs.co

  • 使用vuex较为优雅的实现一个购物车功能的示例代码

    前言 最近使用Vue全家桶手撸了一个pc版小米商城的前端项目,对于组件通信和状态管理有了一个更加深刻的认识.因为组件划分的比较细,开始我使用的是基本的props和emit传值,后来发现一旦嵌套过深就变得很繁琐,同时考虑到有多个组件存在需要共同管理的状态,基本的传值已经没有办法满足需求了,所以使用到了vuex来划分模块管理状态.这里需要提一点就是,如果不存在多组件共同管理的状态,最好是不用vuex管理,vuex是用来管理多组件共同状态的,单单只需要实现跨组件.隔代组件通信的话,使用eventbus

  • vuex的使用和简易实现

    vuex的使用和简易实现

    这里记录一下vuex的使用和vuex的简易实现 首先创建对应的store目录和对应的入口index.js import Vue from 'vue' import Vuex from 'vuex' import products from './modules/products' import cart from './modules/cart' Vue.use(Vuex) export default new Vuex.Store({ strict: process.env.NODE_ENV

  • vuex 如何动态引入 store modules

    vuex 如何动态引入 store modules

    目录 动态引入store modules 我的目录结构是 使用modules时遇到的坑 动态引入store modules 主要解决的问题每次建一个module需要自己去主index.js里面去注册 为了偷懒,也为了避免团队开发时同时对index.js 进行修改引发冲突 所以在index.js中 动态的对子目录和模块进行注册 我的目录结构是 import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) const dynamicModul

  • vuex中使用modules时遇到的坑及问题

    目录 vuex使用modules时遇到的坑 vuex中modules基本用法 1. store文件结构 3. app.js文件内容 5. 配置main.js vuex使用modules时遇到的坑 其实也不算坑,只是自己没注意看官网api,定义module另外命名时,需要在module中加一个命名空间namespaced: true 属性,否则命名无法暴露出来,导致报[vuex] module namespace not found in mapState()等错误. vuex中modules基本

  • 在使用vuex的时候出现commit未定义错误的解决

    目录 使用vuex的时候出现commit未定义错误 出现的原因 错误展现过程 vuex模块化 commit()时报错 unknown mutation type:xxx 废话不多说直接上问题 总结 使用vuex的时候出现commit未定义错误 出现的原因 书写错误 当然,这个错误不是你单词书写错误 只要的原因是因为你的这个 方法里面没有 commit 这个方法 为什么没有?其实它是有的,只不过在 context 里面 你可能是直接写 commit(xxx)了 错误展现过程 首先我们先调用一下 <

  • 浅谈Vuex@2.3.0 中的 state 支持函数申明

    vuex 2.3.0 的发布说明: Modules can now declare state using a function - this allows the same module definition to be reused (e.g. multiple times in the same store, or in multiple stores) 假如你 vuex 的模块有多个格式是完全一样的, 这时候就可以把这个模块公共出来, 在 Vuex 实例里引用, 如: import ap

随机推荐