Vuex 之 module 使用方法及场景

本文介绍了Vuex中module的使用方法及其应用场景,特别是在大型项目中如何利用namespaced属性避免状态管理冲突,确保数据操作的清晰性和可追踪性。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

                                vuex 之 module 使用方法及场景

 

一.  module 使用场景

       在项目开发过程中,随着项目逐渐增大,数据关联复杂度逐渐加大, 多人协同开发,人员变动等。 我们会遇到vuex数据更新时,执行某个action 导致同名/未预测到的关联数据发生了变化。 

      vue 基本思想之一便是数据驱动, vuex 更是专门的数据状态关联库。 导致数据错误结果可想而知......

      使用vuex module 命名空间概念则可以很好的解决这个问题!!!

 

二.  实例演练

      先贴个demo

     store.js

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

const test1 = {
  namespaced: true,
  state: {
    name: 'moduleA',
    type: 'module A'
  },
  mutations: {
    updateNameByMutation(state, appendStr){
      state.name = state.name + " append Str: " + appendStr
    }
  },
  actions: {
    udpateNameByAction({commit}, appendStr) {
      commit("updateNameByMutation", appendStr)
    }
  },
  getters: {
    getNameA(state){
      return state.name
    }
  }
}
const test2 = {
  // 当namespaced=true 时, vuex, 将会自动给各自module 添加访问路径名。 方便区分moduel
  namespaced: true,
  state:{
    name: 'moduleB',
    type: 'module B'
  },
  mutations: {
    updateNameByMutation(state, appendStr){
      state.name = state.name + " append Str: " + appendStr
    }
  },
  actions: {
    // 如果不使用命名空间, 那么view 指向actions 的该方法时,会执行所有与指定action名相同的函数(即:这里module A,B 中该action都会执行)
    udpateNameByAction({commit}, appendStr){
      commit("updateNameByMutation", appendStr)
    }
  },
  getters: {
    getNameB(state){
      return state.name
    }
  }
}

const storeInstall =  new Vuex.Store({
   state: {
     name: 'i am root state name'
   },
   modules:{
    // 这里的路径名: test1, test2, 在view 中 通过 mapActions('test1', [actionName]) 使用并区分需要使用的module
    test1,
    test2
   }
})

export default storeInstall

 store.js 几个简单的vuex 使用场景模拟。 我们有多个模块,分别为: test1, test2...   。 

       我们发现开发中可能会存在相同的stateName/ actionName/ mutaionName /。  (实际开发中,getterName 如果有重名编译会提示 getter 重名....)

      我们使用vuex 需要实例化一个Vuex的Store构造函数。 这里storeInstall 中第一个state, 我们可以理解为根 state, 它全局可访问。 modules 中则是我们自定义注册的module. 每个module 中都有自己独立的state, action, mutation, getter...  

      需要注意的是,这里通过给每个module 对象添加namespaced: true, 来达到命名空间来区分Module的效果。也是通过它来区分更新/调用 对应的vuex 方法来隔离未知数据更新等数据相关问题。

 

Test.vue

<template>
  <div>
    <div>
    <h2>Page Test1</h2>
    </div>
    <div>
    <a href="javascript:" @click="changeName">udpate: 名称Name</a>  &nbsp; &nbsp;
    <a href="javascript:" @click="showName">显示更新后的Name</a> &nbsp; &nbsp;
    </div>
  </div>
</template>
<script>
import { mapState, mapActions } from 'vuex'
export default {
  data(){
    return {}
  },
  computed: {
    ...mapState('test1', {
      state: state => state
    })
  },
  methods: {
    // test1 模块路径名
    ...mapActions('test1', [
      'udpateNameByAction'
    ]),
    changeName(){
      this["udpateNameByAction"]('ha ha test1 udpate !!')
    },
    showName(){
      console.log(this.$store.state)
    },
  },
  mounted() {
    console.log("store name: ", this.$store)
    console.log("namespace test1 state: ", this.state)
  }
}
</script>

         这个test1.vue (还有另外一个对应的test2.vue 代码基本一样,主要用来区别两个页面vuex的更新效果), 则向我们展示了如何使用vuex 提供的api 来做数据更新(这里介绍的是引入命名空间的module 场景)。

         (1) 首先通过vuex 引入需要的api 这里主要演示 ...mapActions .

         (2)  在module场景下引入mapActions 我们发现,第一个参数传的是 module 路径(就引入各个module的名称)名。 这种方式将只会在当前view中,导出指定模块下注册的 action 集合。

         (3)  当调用指定定module下的action 执行state 更新操作时, vuex 通过该module名找到对一定的action 进行下一步mutation 操作。 同时受到影响state的也只会时该命名空间下的state 

 

三.  Vuex module namespaced

      我们来讨论下module 设置了namespaced 与不设置vuex store 中的module数据有何区别?

      打字累截个图吧,一目了然:

      图1: 没有设置namespaced=true 

      

          图2: 设置namespaced=true 

     

       

    

四. 总结

     关于vuex module 这里只是个基本讲解。 总结下来就是module  给了我们一种隔离vuex store 各个 state及相关api 的方法,让数据相关操作在复杂的项目场景可以更清晰,易追踪。 

      

    

 

 

 

 

<think>嗯,我现在要学习Vuex使用介绍和常见的面试点。作为刚开始学Vue的新手,Vuex听起来有点复杂,不过我得慢慢理清楚。首先,Vuex是Vue的状态管理库,对吧?那状态管理是什么意思呢?可能是指管理所有组件共享的状态,比如用户登录信息或者主题颜色之类的,避免组件之间频繁传递数据。 我记得在Vue中,组件之间的通信可以通过props和事件来实现,但如果是多个组件共享同一个状态,尤其是深层嵌套的组件,这种方式可能会变得很麻烦。这时候Vuex就派上用场了,它提供了一个集中式的存储,所有组件都可以访问和修改这个存储里的状态。这样的话,状态的变化更容易追踪和管理。 接下来,Vuex的核心概念有State、Getters、Mutations、Actions和Modules。我需要逐一理解这些概念。State就是存储数据的地方,类似于组件中的data。Getters类似于计算属性,可以对State中的数据进行加工处理。Mutations是用来修改State的方法,而且是同步的,必须通过commit来触发。Actions则是处理异步操作,比如调用API,然后通过commit来触发Mutations。Modules可以把大的Store分割成模块,每个模块有自己的State、Getters、Mutations和Actions,方便管理。 然后,我需要了解如何安装和配置Vuex。通过npm安装vuex,然后在store/index.js中创建Store实例,导入到main.js中,挂载到Vue实例上。这样所有组件都可以通过this.$store访问到Store。 关于基本使用流程,应该是组件通过dispatch调用Action,Action通过commit提交Mutation,Mutation直接修改State,然后State的变化触发组件重新渲染。需要注意的是,不能直接修改State,必须通过Mutations,这样状态的变化才能被追踪到。 面试点的话,可能会问Vuex的核心概念,各概念的作用和区别,比如为什么分Mutations和Actions,同步和异步的区别。还有使用场景,什么时候需要用到Vuex,比如中大型单页应用,多个组件共享状态的时候。另外,可能会问到Vuex和单纯的全局对象有什么区别,可能回答是响应式的,只能通过规定的方式修改,方便调试工具追踪状态变化。 还有可能问Module的作用,如何划分模块,命名空间的问题。以及Vuex的持久化存储,比如页面刷新后数据丢失怎么办,可能需要使用localStorage或者插件如vuex-persistedstate。 对了,辅助函数也是常见的点,比如mapState、mapGetters、mapActions、mapMutations,这些可以简化在组件中的使用。还有Vuex的工作流程,从组件触发Action,到修改State的过程。 可能还会问Vuex的缺点,比如在小型项目中可能会显得繁琐,增加复杂度。或者和Vue3中的Composition API结合使用,比如Pinia作为替代方案。 嗯,大概这些点吧。我需要再检查一下每个部分是否正确,有没有遗漏的重要概念。比如单向数据流的概念在Vuex中是如何体现的,还有严格模式的作用,是否在开发环境中帮助检测不合法的状态修改。以及如何组织大型项目中的Vuex代码结构,模块化分割的最佳实践。</think>### Vuex 使用介绍及核心面试点 --- #### 一、Vuex 是什么? Vuex 是 Vue.js 的**状态管理库**,用于集中管理组件间共享的状态(如用户信息、全局配置等)。它通过**单向数据流**确保状态变更可预测、可追踪。 --- #### 二、核心概念与流程 Vuex 的核心是以下 5 个概念: 1. **State** - **作用**:存储全局状态(类似组件的 `data`)。 - **示例**: ```javascript state: { count: 0, user: null } ``` - 组件中通过 `this.$store.state.count` 访问。 2. **Getters** - **作用**:计算派生状态(类似组件的 `computed`)。 - **示例**: ```javascript getters: { doubleCount: state => state.count * 2 } ``` - 组件中通过 `this.$store.getters.doubleCount` 访问。 3. **Mutations** - **作用**:**同步**修改 `state`,通过 `commit` 触发。 - **示例**: ```javascript mutations: { increment(state, payload) { state.count += payload; } } ``` - 组件中通过 `this.$store.commit('increment', 10)` 调用。 4. **Actions** - **作用**:处理**异步操作**(如 API 请求),通过 `dispatch` 触发,最终调用 `commit`。 - **示例**: ```javascript actions: { async fetchUser({ commit }) { const user = await api.getUser(); commit('setUser', user); } } ``` - 组件中通过 `this.$store.dispatch('fetchUser')` 调用。 5. **Modules** - **作用**:将大型 Store 拆分为多个模块,每个模块独立管理自己的 `state/getters/mutations/actions`。 - **示例**: ```javascript const userModule = { namespaced: true, state: { /* ... */ }, mutations: { /* ... */ } }; ``` --- #### 三、工作流程 1. 组件通过 `dispatch` 调用 **Action**。 2. Action 执行异步任务后,通过 `commit` 触发 **Mutation**。 3. Mutation 修改 **State**。 4. State 变化后,依赖它的组件自动更新。 --- #### 四、安装与配置 1. **安装**: ```bash npm install vuex --save ``` 2. **创建 Store**: ```javascript // store/index.js import Vue from 'vue'; import Vuex from 'vuex'; Vue.use(Vuex); export default new Vuex.Store({ state: { /* ... */ }, mutations: { /* ... */ }, // ... }); ``` 3. **注入 Vue 实例**: ```javascript // main.js import store from './store'; new Vue({ store }).$mount('#app'); ``` --- #### 五、常见面试点 1. **核心概念的区别** - **Mutations vs Actions**: - Mutations 必须同步,Actions 可异步。 - 直接修改 `state` 会破坏响应式,必须通过 Mutations。 2. **使用场景** - 适合中大型项目,多个组件共享复杂状态时使用。 - 小型项目可用 `EventBus` 或 `provide/inject` 替代。 3. **Vuex 的缺点** - 代码模板较繁琐,小型项目可能增加复杂度。 - Vue3 推荐使用 `Pinia`(更轻量、支持 Composition API)。 4. **辅助函数** - `mapState`, `mapGetters`, `mapMutations`, `mapActions` 简化代码: ```javascript import { mapState } from 'vuex'; computed: { ...mapState(['count']) } ``` 5. **持久化存储** - 页面刷新后数据丢失?需搭配 `localStorage` 或插件(如 `vuex-persistedstate`)。 6. **模块化实践** - 按功能划分模块,开启 `namespaced: true` 避免命名冲突。 - 动态注册模块:`store.registerModule('moduleName', module)`。 --- #### 六、总结 Vuex 通过集中式状态管理解决了组件间复杂的状态共享问题,核心在于**规范化的数据流**(State → View → Action → Mutation → State)。面试中需重点理解其设计思想、各概念职责及实际应用场景
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值