vuex分割模块的封装使用记录

浮桥

已于 2023-02-22 15:54:40 修改

阅读量118

点赞数

分类专栏： vuex 文章标签： vue.js javascript 前端

于 2023-02-22 15:30:37 首次发布

本文链接：https://blog.csdn.net/weixin_44801790/article/details/129162921

版权

vuex 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

该文介绍了在Vue.js应用中使用Vuex进行状态管理的方式，特别是模块化的实现，包括每个模块的state、mutation、action、getter。同时，展示了如何通过webpack的require.context动态导入modules，以及在组件中使用mapState、mapGetters、mapActions等辅助函数来操作状态。

摘要由CSDN通过智能技术生成

目录结构

在这里插入图片描述

分割模块 modules

每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块

// user.js
import { login, logout, getInfo } from '@/api/user'
import { getToken, setToken, removeToken } from '@/utils/auth'
import { resetRouter } from '@/router'

const state = {
  token: getToken(),
  name: '',
  avatar: ''
}

const mutations = {
  SET_TOKEN: (state, token) => {
    state.token = token
  },
  SET_NAME: (state, name) => {
    state.name = name
  },
  SET_AVATAR: (state, avatar) => {
    state.avatar = avatar
  }
}

const actions = {
  // user login
  login({ commit }, userInfo) {
  },

  // get user info
  getInfo({ commit, state }) {
  },

  // user logout
  logout({ commit, state }) {
  	commit('SET_TOKEN', '值')
  },

  // remove token
  resetToken({ commit }) {
    return new Promise(resolve => {
      commit('SET_TOKEN', '')
      removeToken()
      resolve()
    })
  }
}

export default {
  namespaced: true,  // 成为带命名空间的模块
  state,
  mutations,
  actions
}

其他模块根据项目需要创建对应模块的js文件

getters.js

const getters = {
  // 变量名: state => state.文件名.变量名
  token: state => state.user.token,
  avatar: state => state.user.avatar,
  name: state => state.user.name
}
export default getters

index.js

手动逐个引入modules（没添加一个模块文件，就要到这里来引入）

import Vue from 'vue'
import Vuex from 'vuex'
import getters from './getters'
import app from './modules/app'
import settings from './modules/settings'
import user from './modules/user'

Vue.use(Vuex)


const store = new Vuex.Store({
  modules: {
    app,
    settings,
    user
  },
  getters
})


export default store

代码引入modules(后续添加的js模块不需要额外的手动引入)
这里是在vue-element-admin-4.2.1的开源项目代码中看到的

import Vue from 'vue'
import Vuex from 'vuex'
import getters from './getters'

Vue.use(Vuex)

// https://webpack.js.org/guides/dependency-management/#requirecontext
const modulesFiles = require.context('./modules', true, /\.js$/)

console.log('modulesFiles',modulesFiles);

// you do not need `import app from './modules/app'`
// it will auto require all vuex module from modules file
const modules = modulesFiles.keys().reduce((modules, modulePath) => {
  // set './app.js' => 'app'
  const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, '$1')
  const value = modulesFiles(modulePath)
  modules[moduleName] = value.default
  return modules
}, {})


const store = new Vuex.Store({
  modules,
  getters
})

export default store

main.js

import store from './store'

new Vue({
  el: '#app',
  router,
  store,
  render: h => h(App)
})

组件中使用

vuex里面 mapState 、mapGetters 、mapMutations 、mapActions 等方法都可使用，这里就记录一写简单使用已经足够了。

1. 获取参数

// 1:
import { mapGetters } from 'vuex'
computed: {
  ...mapGetters([
    'sidebar',
    'avatar'
  ])
},

// 2:
computed: {
  avatar() {
    return this.$store.state.user.avatar
  }
},

2. 触发actions

// this.$store.dispatch('模块名称/actions里面的方法')
this.$store.dispatch('user/resetToken')

// store.dispatch 可以处理被触发的 action 的处理函数返回的 Promise，并且 store.dispatch 仍旧返回 Promise
this.$store.dispatch('user/resetToken').then(()=>{ ... })