Vue3+webpack项目的vuex封装

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。
它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

简单解释就是它是用来放项目所有组件都能共享的数据用的。

首先安装vuex：

npm i vuex -s

封装vuex的目录结构如下图：
图1

【./src/store】：用来存放封装 vuex 相关文件的文件夹；

【./src/store/index.js】：封装 vuex 的主体文件，创建全局store，存放全局使用共享的数据。

代码：

import { createStore } from 'vuex'import state from './components/state'import actions from './components/actions'import getters from './components/getters'import mutations from './components/mutations'import modA from './storeModules/modA.js'// 全局store,存放全局使用共享的数据// 注意：全局模块中不需要开启命名空间export default createStore({  state,            // 设置的初始属性值  getters,          // 实时监听state值的变化(最新状态)  mutations,        // 定义mutations，用于修改状态(同步)  actions,          // 定义actions，用于修改状态(异步)  // 局部模块  modules: {    modA  }})

注意：

1.全局模块中不需要开启命名空间。

2.state 是设置的初始属性值，项目中的状态变化也会更新 state。

3.getters 实时监听state值的变化(最新状态)。

4.mutations 用于修改状态(同步)。

5.actions 用于修改状态(异步)。

6.modules 用来引入不同模块数据。

【./src/store/components/state.js】：

代码：

// .vue文件可以通过 store 获取初始状态数据const state = {    names: '月影WEB',    ages:18}// vue2 // ----this.$store.state.names // vue3 // ----import { useStore } from 'vuex'// ----const store = useStore()// ----store.state.namesexport default state;

注意：
1.【.vue】文件可以通过 store 获取初始状态数据。

2.【vue2】可以通过 this.$store.state.names 或者 this.$store.state.ages 来获取 state 状态中的数据。

3.【vue3】获取 state 中的数据方式如下：

import { useStore } from 'vuex'const store = useStore()console.log(store.state.names)console.log(store.state.ages)

【./src/store/components/getters.js】：

代码：

// 实时监听state值的变化(最新状态)，// 只是用来方便监听最新的state的变化const getters = {    isShow(state) {  // 承载变化的 names 的值        return state.names     },     getChangeAges(state){  //承载变化的 ages 的值        return state.ages     }}// vue2 // ----this.$store.getters.getChangeAges// vue3 // ----import { useStore } from 'vuex'// ----const store = useStore()// ----store.getters.getChangeAgesexport default getters;

注意：
1.实时监听 state 值的变化(最新状态)。

2.【vue2】可以通过 this.$store.getters.isShow 或者 this.$store.state.getChangeAges 来实时监听 state 状态中的数据变化。

3.【vue3】实时监听 state 中的数据方式如下：

import { useStore } from 'vuex'const store = useStore()console.log(store.getters.isShow)console.log(store.getters.getChangeAges)

【./src/store/components/mutations.js】：

代码：

// 定义mutations，用于修改状态(同步)// 自定义改变state初始值的方法，这里面的参数除了state之外还可以再传额外的参数(变量或对象);const mutations = {  changesNames(state) {   // 自定义改变state初始值的方法，这里面的参数除了state之外还可以再传额外的参数(变量或对象);    state.names = '月影WEB-改变';  },  newAges(state,sum){ // 同上，这里面的参数除了state之外还传了需要增加的值sum    state.ages += sum;  }}// vue2 // ----this.$store.commit('changesNames') // vue3 // ----import { useStore } from 'vuex'// ----const store = useStore()// ----store.commit('changesNames')export default mutations;

注意：

1.用于修改状态(同步)。

2.【vue2】可以通过 this.$store.commit('changesNames') 或者this.$store.commit('newAges')  来修改 state 状态中 names 和 ages 的数据。

3.【vue3】修改 state 中的数据方式如下：

import { useStore } from 'vuex'const store = useStore()store.commit('changesNames')store.commit('newAges')

【./src/store/components/actions.js】：

代码：

// 定义actions，用于修改状态(异步)const actions = {    changesNames(context) {  // 自定义触发mutations里函数的方法，context与store 实例具有相同方法和属性      context.commit('changesNames');    },    getNewAges(context,num){   // 同上注释，num为要变化的形参        context.commit('newAges',num)    }}// vue2 // ----this.$store.dispatch('getNewNum',1)// vue3 // ----import { useStore } from 'vuex'// ----const store = useStore()// ----store.dispatch('getNewNum',1)export default actions;

注意：
1.用于修改状态(异步)
2.【vue2】可以通过 this.$store.dispatch('changesNames') 或者this.$store.dispatch('getNewAges')  来调用 actions.js 中对应的方法进而修改 state 状态中的数据。
3.【vue3】调用 actions.js 中对应的方法进而修改 state 中的数据方式如下：

import { useStore } from 'vuex'const store = useStore()store.dispatch('changesNames')store.dispatch('getNewNum',1)

【./src/store/components/storeModules】：此文件夹下放各局部模块的 state 等等。

代码：

// ceshi 模块的内容const state = {    // ceshi 模块的数据};const mutations = {    // ceshi 模块的 mutations};const actions = {    // ceshi 模块的actions};export default {    namespaced: true, // 开启命名空间    state,    actions,    mutations}

注意：局部模块多一个开启命名空间。

以上代码就已经对 Vuex 进行了简单的封装了。

接下去就如何使用 Vuex 封装的代码了？

1.在【./src/index.js 】文件中引用封装的 Vuex 。
如下图：
图2

2.在【./src/App.vue】文件中测试 Vuex 封装的效果。

如下图：

图3

页面效果图如下：

图4

关注公众号（月影WEB），了解更多的前后端知识；
欢迎大家关注互相交流学习；