Vuex 模块化详解

最新推荐文章于 2024-08-09 02:13:59 发布
最新推荐文章于 2024-08-09 02:13:59 发布
阅读量795 收藏 4
点赞数 2
分类专栏： 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)
            }
        }
    }
都挺好，刚刚好
关注
专栏目录
vuex模块化
王攀
01-18 1793
写这个也是项目中用到了。不过没有参考vuex官网提供的demon去写，所以是怎么简单怎么来。只能说对vuex的理解有限。这里就记录一下我在项目中使用vuex的详细过程吧。后期要是有时间再来记录。 首先看下目录 图片有点大 那就分两步建立模块化的vuex吧。两步。建立modules建立承载modules的Vuex.Store建立modules/*ruteModule.js 路由状态模块数据*/ /*
vuex的模块化
richest_qi的博客
05-06 2075
本例有两个组件，分别是， Count组件，详见Count.vue。 Person组件，详见Person.vue。 Count组件和Person组件共享以下两个数据： sum personList 代码主要涉及如下3个文件， store/index.js App.vue Count.vue Person.vue main.js main.js import Vue from 'vue' import App from './App.vue' import store from "./store".
Vuex模块化 深入浅出超详细
最新发布
Java.慈祥
08-09 1068
和正常的Vuex中定义类似，如下：定义函数给模块内修改用户对象age值；
Vuex模块化使用
陆仁丶的博客
07-29 2564
一、概览 1、Vuex是什么 专为Vue.js应用程序开发的状态管理模式（状态即数据，即数据管理） 采用集中式存储管理应用的所有组件的状态 以相应的规则保证状态以一种可预测的方式发生变化 2、状态 组件内部状态：仅在一个组件内使用的状态( 即data字段里的数据，不能共享，只在本组件使用 ) 应用级别状态：多个组件共用的状态（将这个状态放入vuex中进行管理） 3、什么情况下使用Vuex 多个视图（组件）依赖同一状态 来自不同视图（组件）的行为需要变更同一状态 二、Vuex核心概念 1、store：类似容器
Vuex的模块化、优点
qq_39110534的博客
11-06 1698
前言：如果说我们的vuex的仓库代码量巨大，我们要不要采用就像后端与一样的分层，要不然一吨的代码放在main里，呵呵。所以我们要采用模块化！ 看这篇文章的时候，一定要看看上一篇的vuex入门精讲：Vuex的基本概念、项目搭建、入坑点 其中我们的store.js被我们封装成了这样子：   import API from '../../utils/api'; var api...
Vuex 模块化使用详解
10-16
为了解决这一问题，Vuex提供了模块化功能，允许我们将store分割成多个模块。每个模块可以拥有自己的state、mutations、actions、getters，甚至是嵌套的子模块。 模块化使用的核心思想是将不同的状态空间进行分割。...
vuex模块化 怎么引用state_Vuex 模块化使用详解
weixin_31102231的博客
12-31 1016
前言 上回我们说了一下 vuex 的简单使用，最后面的时候有说了，由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。为了解决以上问题，Vuex 允许我们将 store 分割成模块(module)。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割，今天我们...
vuex模块化demo
08-26
**vuex模块化详解** Vuex 是 Vue.js 的一个官方状态管理库，它提供了一种集中式的存储方式来管理组件间的共享状态，并提供了强大的工具来跟踪状态的变化，从而简化复杂应用的状态管理。在大型 Vue 项目中，随着组件...
Vuex模块化全面使用.rar
09-16
vuex模块化使用的简单demo，帮助快速集成和引入vuex，减少引入时间，里面的代码只包含vuex相关文件，可以正常copy使用，不同于其他资源，这个demo充分考虑到实际应用的多种写法，灵活变通使用。
Vuex 模块化
Meditation_Crazy
12-15 244
参考文档 https://blog.csdn.net/Dear_Mr/article/details/84576029 状态管理的使用 第一种方式 安装完毕Vuex，写一个store文件：比如_bak.js 然后在main.js引入这个_bak.js 把这个框内的路径，换成_bak.js的即可，然后在下面的vue实例的时候，放入。就可以使用了。 更详细的介绍，以及使用方法，参考上一篇...
Vuex的模块化
liguangda的博客
11-30 413
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 521
【代码】Vuex模块化管理。
Vuex模块化
千城墨白&的博客
06-15 296
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 234
一般当项目比较大时，如果vuex 的modules模块过多，此时需要用到模块化来管理仓库。如果在index里引入modules中所有的文件，需在index.js中配置以下。比如在addController.js中定义一个变量。页面中通过getter取state属性。在getters.js中获取该属性。页面中存state属性。
vuex的分模块化与辅助函数
hjdjhh的博客
01-07 1059
目录 分模块化 怎么分模块 模块化后，在vue组件里的使用 vuex的辅助函数 都有什么辅助函数 默认为vuex的index.js的辅助函数 引入 注意事项： 两种遍历方式 分模块后的使用辅助函数 需引入一些数据 使用方法 除命名外，其他遵循以上规则 分模块化 怎么分模块 1 在vuex的store文件夹里添加一个js文件，内容如下 export default { // 代表这是一个命名独立的空间，不会与index.js里的命名冲突与污染 namespaced:t...
Vuex模块化组织详解：实战与最佳实践
"Vuex 进阶之模块化组织详解" 在Vuex的进阶使用中，模块化组织是非常重要的一环。随着应用的复杂性增加，将所有的状态管理集中在一个单一的store.js文件中会导致代码难以维护和扩展。模块化能够帮助我们将不同功能...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值