Vuex 模块化详解

最新推荐文章于 2023-07-26 16:03:24 发布
最新推荐文章于 2023-07-26 16:03:24 发布
阅读量638 收藏 4
点赞数 1
分类专栏： vuex 文章标签： javascript vue.js 前端
原文链接：https://blog.csdn.net/wuxian_wj/article/details/122048927?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522165992721816782390567056%2522%252C%2522scm%2522%253A%252220140713.130102334..%2522%257D&request_id=165992721816782390567056&biz_id=0&utm_medi
版权

使用Vuex的好处

  1. 能够在Vuex中集中管理共享数据，易于开发和后期维护
  2. 能够高效地实现组件之间的数据共享，提高开发效率
  3. 在Vuex中的数据都是响应式的

Vuex的状态管理模式

在这里插入图片描述
在这里插入图片描述

为什么要用到Vuex Modules

在这里插入图片描述

Vuex Modules简单使用

我们在src目录下建立我们的store文件夹，用来写一些vuex module的简单使用。

1.index.js
// index.js
import Vue from 'vue'
import Vuex from 'vuex'
import { moduleA } from './moduleA'
import { moduleB } from './moduleB'

Vue.use(Vuex)

export default new Vuex.Store({
    state: {
        count: 0,
        name: 'index'
    },
    mutations: {
        increment(state, payload) {
            state.count += payload.amount;
            console.log("mutations" + state.name)

        },
    },
    actions: {
        incrementAsync({ state, commit }, products) {
            setTimeout(() => {
                console.log("actions" + state.name)
                commit('increment', products)
            }, 1000)
        }
    },
    modules: { moduleA, moduleB },
    getters: {
        getCount: (state) => {
            return "store被调用了" + state.count + "次"
        }
    }
})
2.moduleA.js
// moduleA.js
export const moduleA = {
    state: {
        nameA: "moduleA",
        countA: 0
    },
    mutations: {
        incrementA(state, payload) {
            state.countA += payload.amount;
            console.log("mutations" + state.nameA)
        }
    },
    actions: {
        incrementAsyncA({ commit }, products) {
            setTimeout(() => {
                commit('incrementA', products)
                console.log("actions" + state.nameA)
            }, 1000)
        }
    },
    getters: {
        getCountA: (state, getters) => {
            console.log("getter" + state.nameA)
            return state.nameA + "被调用了" + state.countA + "次"
        }
    }
}
3.moduleB.js
// moduleB.js
export const moduleB = {
    state: {
        nameB: "moduleB",
        countB: 0
    },
    mutations: {
        incrementB(state, payload) {
            state.countB += payload.amount;
            console.log("mutations" + state.nameB)
        }
    },
    actions: {
        incrementAsyncB({ commit }, products) {
            setTimeout(() => {
                commit('incrementB', products)
                console.log("actions" + state.nameB)
            }, 1000)
        }
    },
    getters: {
        getCountB: (state, getters) => {
            console.log("getter" + state.nameB)
            return state.nameB + "被调用了" + state.countB + "次"
        }
    }
}
4.页面
<template>
  <div class="hello">
   <div>
     {{name}}
     <button @click="incrementFun">{{count}}</button>
     {{getCount}}
   </div>
   <div>
     {{nameA}}
     <button @click="incrementFunA">{{countA}}</button>
     {{getCountA}}
   </div>
   <div>
     {{nameB}}
     <button @click="incrementFunB">{{countB}}</button>
     {{getCountB}}
   </div>
  </div>
</template>

<script>
import { mapState, mapMutations, mapActions, mapGetters } from 'vuex'

export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  computed:{
    ...mapState({
      count: state => state.count,
      name: state => state.name,
      countA: state => state.moduleA.countA,
      nameA: state => state.moduleA.nameA,
      countB: state => state.moduleB.countB,
      nameB: state => state.moduleB.nameB
    }),
    ...mapGetters([
      'getCount',
      'getCountA',
      'getCountB'
    ])
  },methods:{
    ...mapMutations([
      'increment',
      'incrementA',
      'incrementB'
    ]),
    ...mapActions([
      'incrementAsync',
      'incrementAsyncB',
      'incrementAsyncB'
    ]),
    incrementFun(){
      this.increment({amount:1})
      console.log(this.$store.state);
    },
     incrementFunA(){
      this.incrementA({amount:1})
    }, 
    incrementFunB(){
      this.incrementB({amount:1})
    }
  }
}
</script>

<style scoped>
</style>

我们需要注意的是，不同mutation以及action中函数的名字相同会出现函数被重复调用的情况。

模块的局部状态

对于模块内部的mutation和getter，接收到的第一个参数是模块的局部状态对象。

**在getter中，根节点状态会作为第三个参数暴露出来。

//moduleA.js
    mutations: {
        incrementA(state, payload) {
            state.countA += payload.amount;
            console.log(state);
        }
    },
    getters: {
        getCountA: (state, getters, rootState) => {
            console.log(state);
            console.log(rootState);
            return state.nameA + "被调用了" + state.countA + "次"
        }
    }

1.根据输出我们可以看到，这里的state只是moduleA的state对象。
2.同样，对于模块内部的action，局部状态通过context.state暴露出来，根节点状态则为context.rootState

// moduleA.js
    actions: {
        incrementAsyncA({ commit, state, rootState }, products) {
            setTimeout(() => {
                console.log(state);
                console.log(rootState);
                commit('incrementA', products)
            }, 1000)
        }
    }

在这里插入图片描述

命名空间

默认情况下，模块内部的action、mutation和getter是注册在全局命名空间的，这样使得多个模块能够对同一mutation或action做出响应。

如果我们想让我们的模块具有更高的封装度和复用性，可以通过添加namespaced: true的方式使其成为带命名空间的模块。当模块被注册后，他的所有getter、action及matation都会自动根据模块注册的路径调整命名。

// index.js 只倒入moduleA
modules: { moduleA }

// moduleA
import { moduleB } from './moduleB'
import { moduleC } from './moduleC'

//moduleA.js
export const moduleA = {
    namespaced: true,
    state: {
        nameA: "moduleA",
        countA: 0
    },
    mutations: {
        incrementA(state, payload) {
            state.countA += payload.amount;
        }
    },
    actions: {
        incrementAsyncA({ commit, state, rootState }, products) {
            setTimeout(() => {
                commit('incrementA', products)
            }, 1000)
        }
    },
    getters: {
        getCountA: (state, getters, rootState) => {
            return state.nameA + "被调用了" + state.countA + "次"
        }
    },
  //嵌套子模块
    modules: {
        moduleB,
        moduleC
    }
}
// moduleB.js moduleB没有设置namespaced: true会继承父模块命名空间
export const moduleB = {
    state: {
        nameB: "moduleB",
        countB: 0
    },
    mutations: {
        incrementB(state, payload) {
            state.countB += payload.amount;
        }
    },
    actions: {
        incrementAsyncB({ commit }, products) {
            setTimeout(() => {
                commit('incrementB', products)
            }, 1000)
        }
    },
    getters: {
        getCountB: (state, getters) => {
            return state.nameB + "被调用了" + state.countB + "次"
        }
    }
}
//moduleC.js
export const moduleC = {
    namespaced: true,
    state: {
        nameC: "moduleC",
        countC: 0
    },
    mutations: {
        incrementC(state, payload) {
            state.countC += payload.amount;
        }
    },
    actions: {
        incrementAsyncC({ commit }, products) {
            setTimeout(() => {
                commit('incrementC', products)
            }, 1000)
        }
    },
    getters: {
        getCountC: (state, getters) => {
            return state.nameC + "被调用了" + state.countC + "次"
        }
    }
}

组件内使用：

<template>
  <div class="hello">
   <div>
     {{name}}
     <button @click="incrementFun">{{count}}</button>
     {{getCount}}
   </div>
   <div>
     {{nameA}}
     <button @click="incrementFunA">{{countA}}</button>
     {{getCountA}}
   </div>
   <div>
     {{nameB}}
     <button @click="incrementFunB">{{countB}}</button>
     {{getCountB}}
   </div>
    <div>
     {{nameC}}
     <button @click="incrementFunC">{{countC}}</button>
     {{getCountC}}
   </div>
  </div>
</template>

<script>
import { mapState, mapMutations, mapActions, mapGetters } from 'vuex'

export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  computed:{
    ...mapState({
      count: state => state.count,
      name: state => state.name,
      countA: state => state.moduleA.countA,
      nameA: state => state.moduleA.nameA,
      countB: state => state.moduleA.moduleB.countB,
      nameB: state => state.moduleA.moduleB.nameB,
      countC: state => state.moduleA.moduleC.countC,
      nameC: state => state.moduleA.moduleC.nameC
    }),
    ...mapGetters({
      getCount: 'getCount',
      getCountA: 'moduleA/getCountA',
      getCountB: 'moduleA/getCountB',
      getCountC: 'moduleA/moduleC/getCountC'
    })
  },methods:{
    ...mapMutations({
      increment: 'increment',
      incrementA: 'moduleA/incrementA',
      incrementB: 'moduleA/incrementB',
      incrementC: 'moduleA/moduleC/incrementC'
    }),
    ...mapActions({
      incrementAsync: 'incrementAsync',
      incrementAsyncA: 'moduleA/incrementAsyncA',
      incrementAsyncB: 'moduleA/incrementAsyncB',
      incrementAsyncC: 'moduleA/moduleC/incrementAsyncC'
    }),
    incrementFun(){
      this.increment({amount:1})
    },
     incrementFunA(){
      this.incrementA({amount:1})
    }, 
    incrementFunB(){
      this.incrementB({amount:1})
    },
    incrementFunC(){
      this.incrementC({amount:1})
    }
  }
}
</script>

<style scoped>
</style>

在带命名空间的模块内访问全局内容

在这里插入图片描述

  // moduleA.js  
	actions: {
        incrementAsyncA({ dispatch, commit, getters, rootGetters }, products) {
            setTimeout(() => {
                console.log(rootGetters['moduleA/moduleC/getCountC'])
                commit('moduleA/incrementB', products, { root: true })
                commit('incrementA', products)
            }, 1000)
        }
    },
    getters: {
        getCountA: (state, getters, rootState, rootGetters) => {
            console.log(rootGetters.getCount)
            console.log(rootGetters['moduleA/getCountB'])
            return state.nameA + "被调用了" + state.countA + "次"
        }
    }

在这里插入图片描述

在带命名空间的模块注册全局action

若需要在命名空间的模块注册全局action，我们可以添加root: true，并将这个action的定义放在函数handler中

actions: {
        incrementAsyncA: {
            root: true,
            handler({ dispatch, commit, getters, rootGetters }, products) {
                setTimeout(() => {
                    commit('incrementA', products)
                }, 1000)
            }
        }
    }
都挺好，刚刚好
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vuex模块化全面使用.rar
09-16
vuex模块化使用的简单demo，帮助快速集成和引入vuex，减少引入时间，里面的代码只包含vuex相关文件，可以正常copy使用，不同于其他资源，这个demo充分考虑到实际应用的多种写法，灵活变通使用。
vuex的模块化
措手不及ya的博客
09-04 548
vuex模块化学习
Vuex模块化使用
陆仁丶的博客
07-29 2506
一、概览 1、Vuex是什么 专为Vue.js应用程序开发的状态管理模式（状态即数据，即数据管理） 采用集中式存储管理应用的所有组件的状态 以相应的规则保证状态以一种可预测的方式发生变化 2、状态 组件内部状态：仅在一个组件内使用的状态( 即data字段里的数据，不能共享，只在本组件使用 ) 应用级别状态：多个组件共用的状态（将这个状态放入vuex中进行管理） 3、什么情况下使用Vuex 多个视图（组件）依赖同一状态 来自不同视图（组件）的行为需要变更同一状态 二、Vuex核心概念 1、store：类似容器
Vuex的模块化、优点
qq_39110534的博客
11-06 1679
前言：如果说我们的vuex的仓库代码量巨大，我们要不要采用就像后端与一样的分层，要不然一吨的代码放在main里，呵呵。所以我们要采用模块化！ 看这篇文章的时候，一定要看看上一篇的vuex入门精讲：Vuex的基本概念、项目搭建、入坑点 其中我们的store.js被我们封装成了这样子：   import API from '../../utils/api'; var api...
Vuex 模块化使用详解
10-16
主要介绍了Vuex 模块化使用详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
Vuex 进阶之模块化组织详解
11-29
前两篇讲解了一下 Vuex 的基本使用方法，可是在实际项目中那么写肯定是不合理的，如果组件太多，不可能把所有组件的数据都放到一个 store.js 中的，所以就需要模块化的组织 Vuex，首先看一下 项目结构。   项目结构...
详解Vuex下Store的模块化拆分实践
12-10
>2.0，在搞Store的时候发现，圈子里大部分关于vuex的文章都是比较基础的Demo搭建方式，很少有涉及到比较复杂的模块化拆分的Store实践，而且事实上也有朋友在实践中问到过这方面的内容，vuex自身提供了模块化的方式，...
vuex模块化
Liberty_yes的博客
02-10 6003
将store模块化（module），即每个模块拥有自己的state、mutation、action、getter、甚至是嵌套子模块
Vuex 模块化
Meditation_Crazy
12-15 233
参考文档 https://blog.csdn.net/Dear_Mr/article/details/84576029 状态管理的使用 第一种方式 安装完毕Vuex，写一个store文件：比如_bak.js 然后在main.js引入这个_bak.js 把这个框内的路径，换成_bak.js的即可，然后在下面的vue实例的时候，放入。就可以使用了。 更详细的介绍，以及使用方法，参考上一篇...
Vuex的模块化
liguangda的博客
11-30 358
Vux的基本模块化 目录： 1.在store文件夹下创建modules文件夹，modules文件夹下的index.js用来汇总Vuex的模块，并统一暴露。这样只需在store的配置中引入modules即可。 // 汇总所有vuex的模块 import home from "./home"; import login from "./login"; // 统一暴露出去 export default { home, login, }; 2.modules文件夹下，用来设置每个模块的状态管理配置。例
Vuex模块化管理
文龙刚的博客
07-26 457
【代码】Vuex模块化管理。
Vuex模块化
千城墨白&的博客
06-15 267
Vue简单实用请访问https://blog.csdn.net/weixin_51497206/article/details/117510658?spm=1001.2014.3001.5501 本文主要讲述vuex模块化使用 为什么要使用模块化？ 模块化使用是为了让合作开发更方便，不容易产生git冲突,也是为了让项目代码更清晰合理，便于管理。 另外就是命名空间的问题，就是为了让当前vuex模块里的状态名，函数名不和其他的空间相冲突，但是调用时要加上模块名 1.打开vue项目目录下的src文.
vuex 模块化
weixin_45435854的博客
09-28 215
一般当项目比较大时，如果vuex 的modules模块过多，此时需要用到模块化来管理仓库。如果在index里引入modules中所有的文件，需在index.js中配置以下。比如在addController.js中定义一个变量。页面中通过getter取state属性。在getters.js中获取该属性。页面中存state属性。
vuex的分模块化与辅助函数
hjdjhh的博客
01-07 1033
目录 分模块化 怎么分模块 模块化后，在vue组件里的使用 vuex的辅助函数 都有什么辅助函数 默认为vuex的index.js的辅助函数 引入 注意事项： 两种遍历方式 分模块后的使用辅助函数 需引入一些数据 使用方法 除命名外，其他遵循以上规则 分模块化 怎么分模块 1 在vuex的store文件夹里添加一个js文件，内容如下 export default { // 代表这是一个命名独立的空间，不会与index.js里的命名冲突与污染 namespaced:t...
vuex 使用详解 (模块化使用)
小D科技的博客
12-18 595
在日常开发中  采用vuex可以很好解决全局对象和变量问题     核心理念：统一的状态管理机       第一步 ：npm i -S vuex；     第二步：建立store文件夹；     第三步：main.js引用；     第四步：导出store；     采用模块化开发的方式  如上图的unit的模块；     compon...
vuex模块化详解
一只小鹰
08-08 4714
原文链接： https://www.jeremyjone.com/432/ ， 转载请注明！ vuex为我们提供了状态管理的解决方案，其最基本的结构如下： 在main.js层级下创建一个store.js文件，写入： 然后导入main.js并注册： 这样，最基本的vuex就可以使用了。 随着actions和mutations中的方法越来越多，文件越来越臃肿，我们会觉得越来越不好用。 那么就需...
vue-vuex详解
最新发布
11-18
Vue.js是一个流行的JavaScript框架，它允许您构建动态Web应用程序。Vuex是一个专为Vue.js应用程序开发的状态管理模式。它允许您在应用程序中管理和维护状态，例如用户信息、购物车、主题等。Vuex将状态存储在一个集中的存储库中，称为store。Vuex的核心概念包括state、mutations、actions和getters。 - state：存储应用程序级别的状态，可以通过store.state访问。 - mutations：用于更改状态的函数，必须是同步函数。可以通过store.commit方法调用。 - actions：用于处理异步操作的函数，可以包含任意异步操作。可以通过store.dispatch方法调用。 - getters：用于从store中获取状态的函数，可以通过store.getters访问。 下面是一个简单的示例，演示如何在Vue.js应用程序中使用Vuex： 1.安装Vuex ```shell npm install vuex --save ``` 2.创建store ```javascript import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) const store = new Vuex.Store({ state: { count: 0 }, mutations: { increment (state) { state.count++ } }, actions: { incrementAsync ({ commit }) { setTimeout(() => { commit('increment') }, 1000) } }, getters: { getCount: state => { return state.count } } }) export default store ``` 3.在Vue组件中使用store ```javascript <template> <div> <p>Count: {{ count }}</p> <button @click="increment">Increment</button> <button @click="incrementAsync">Increment Async</button> </div> </template> <script> import { mapGetters, mapActions } from 'vuex' export default { computed: { ...mapGetters([ 'getCount' ]) }, methods: { ...mapActions([ 'increment', 'incrementAsync' ]) } } </script> ``` 在上面的示例中，我们创建了一个名为count的状态，并定义了一个名为increment的mutation和一个名为incrementAsync的action。我们还定义了一个名为getCount的getter，用于从store中获取count状态。在Vue组件中，我们使用mapGetters和mapActions帮助程序将getter和action映射到组件中。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值