（八）vuex 模块化

老怪兽

发布于 2023-02-22 19:09:58

4680

文章被收录于专栏：老怪兽的前端之旅老怪兽的前端之旅

一、`vuex` 模块化&减少文件体积

说明

随着我们项目越来越大，把所有的状态都放到一个文件中，会非常难以管理，所以 vuex 支持我们使用，模块化

每一个模块都是一个普通的对象，他跟 createStore 传递的参数是一样的，同时还可以定义模块，在开发中，我们把子模块定义在单独的文件中然后进行导出使用

// users.js
export const users = {
  state() {},           // 存储全局的数据，相当于 data
  mutations: {},        // state 的数据只有在这里才能够被修改，并且必须是同步操作，不能是异步操作
  actions: {},          // 这里是异步操作，如果需要改变 state 中的数据，需要调用 mutations 的方法来改变
  getters: {},          // getters 相当于 vuex 中的计算属性，全局getters
  modules: {}           // 子模块
}

二、`state` 的根模块

我们把 createState 中的模块称为顶级模块，或者是根模块，然后通过 modules 来加载子模块，modules 的属性名是子模块的对象名

import { users } from './users.js'
import { blogs } from './blogs.js'

const store = createStore({
  modules: {
    users,
    blogs,
  },
  state() {},
  mutations() {}
  // ...
})

三、最终状态

最终所有的对象都会合并成一个 state 跟定义一个完整的 state 文件的效果是一样的

{
  // users 和 blogs 属性名和 modules 中定义的保持一致
  users: {/* users 中的内容 */},
  blogs: {/* blogs 中的内容 */}
}

四、模块中的配置(适用于没有命名空间的情况)

模块中的 mutations 的第一个参数接收的是本模块的 state 他只会修改本模块的状态

// users.js
mutations: {
  addUser(state, playload) {
    state.list.push(playload.user)
  }
}

2. 模块中的 getters 的第一个参数接收的也是本模块的 state 第二个参数 getters 可以访问 所有模块的 getters，第三个参数，rootState 可以访问所有模块的状态

// users.js
limitedUserCoumtStr(state, getters, rootState) {
  console.log(getters)
  console.log(rootState)
  // 访问的是 blogs.js 中的 getters
  return getters.limitdBlogCountStr + '用户名'
}

3. 模块中的 actions, 中的第一个参数结构出来的 { commit } 触发所有模块中的 mutations ,{ dispatch } 触发所有模块中的 actions，{ rootState } 来访问其他模块的 state，通过 getter 可以访问所有模块的 getters

注意 actions 中 context 的 state 参数只能访问本模块的状态，要想访问其他模块的状态，使用 context 解构出来的 rootState

// users.js
actions: {
  adduserAsync({commit, dispatch, rootState, getters}, payload) {
    setTimeout(() => {
      setTimeout(() = {
        commit('addUser', playload)
        dispatch('addBlogAsync', {blog: 'bfremUser'})
      }, 1000)
    })
  }
}

总结-写在最后

总结

本模块中的 mutations 只能修改本模块的中的 stateactions getter 可以通过参数来访问所有模块的 mutations , actions, getters

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2022年11月26日，如有侵权请联系 cloudcommunity@tencent.com 删除

vue.js

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

vue.js

登录后参与评论

0 条评论

热度