1. 初识vuex

1.1 vuex官网

学习任何一门计算机语言之前，去查看具有权威的官方文档是一个明智之举。
vuex官网直链

1.2 什么情况下应该使用vuex？

如果您不打算开发大型单页应用，使用 Vuex 可能是繁琐冗余的。

2. 在项目中引入 vuex （以下是直接进行了功能模块划分进行的使用说明）

2.1 安装 vuex

npm install vuex

2.2 按功能进行模块划分

2.2.1 引入所有模块所需的文件 – index.js

在项目文件夹 src 里，创建 store 文件夹，再在 store 里创建 index.js 文件，文件代码具体如下

import Vue from 'vue'
import Vuex from 'vuex'// 引入功能模块  moduleA 、 moduleB
import moduleA from "./modules/moduleA.js"
import moduleB from "./modules/moduleB.js"Vue.use(Vuex)export default new Vuex.Store({state: {},modules: {//  按功能拆分module模块后，把所有的功能模块 挂载到 总的 store 上moduleA,moduleB}
})

2.2.2 按功能划分的模块A – moduleA.js

/*  *  根据功能进行拆分的功能模块一   -- moduleA*/import axios from 'axios'
export default {// 命名空间必须打开，个人项目中为了保证每个模块之间的独立性，防止命名冲突产生报错的问题，选择打开namespaced: true, //开启命名空间（防止属性名冲突）/* * state 相当于 vue 中的 data，存储的数据*/state: {scheduleTypeEnum: [{value: 'IPI',description: '等额本金'},{value: 'EPI',description: '等额本息'},{value: 'IOI',description: '一次还本按频率结息'},{value: 'FPI',description: '利随本清'},{value: 'UDS',description: '用户自定义还款计划'}]},/* *getters 相当于 computed 计算属性*/getters: {},/* * mutations 执行 同步操作*/mutations: {},/* * actions 执行 异步操作*/actions: {}
}

2.2.3 按功能划分的模块B – moduleB

/*  *  根据功能进行拆分的功能模块一   -- moduleB*/
export default {state: {},getters: {},mutations: {},actions: {}
}

2.2.4 在具体的页面中的使用

此处只举例 state

<template><div class="page-vuexUsed"><div>{{scheduleTypeEnum}}</div></div>
</template><script>
export default {name: 'vuexUsed',components: {},data () {return {scheduleTypeEnum: null}},computed: {// stategetScheduleTypeEnum () {return this.$store.state.moduleA.scheduleTypeEnum}},created () { },mounted () {},methods: {}
}
</script>

3. vuex在页面开发中的使用详细说明

下面state、getter、mutation、action、modules部分所需引入的完整的功能模块 moduleA.js 文件，具体代码如下：

/*  *  根据功能进行拆分的功能模块一   -- moduleA*/
import axios from 'axios'
export default {namespaced: true, //开启命名空间 避免属性名冲突/* * state 相当于 vue 中的 data，存储的数据*/state: {userInfo: null,scheduleTypeEnum: [{value: 'IPI',description: '等额本金'},{value: 'EPI',description: '等额本息'},{value: 'IOI',description: '一次还本按频率结息'},{value: 'FPI',description: '利随本清'},{value: 'UDS',description: '用户自定义还款计划'}],personOne: "Zhang San",productsNum: 0},/* *getters 相当于 computed 计算属性*/getters: {// 修改personOne(使用情形：很多页面使用到personOne,需要修改)changePersonOne(state) {return `hello ${state.personOne}`}},/* * mutations 执行 同步操作*/mutations: {// 固值更改changeProductsNum(state) {state.productsNum++},// 传值更改changePersonOneName(state, newName) {state.personOne = newName.newName}},/* * actions 执行 异步操作*/actions: {// 调取获取用户信息 mock接口getUserInfo() {axios.get("/user/userInfo").then(res => {console.log(res.data.data, "actions -- getUserInfo")})}}
}

3.1 state

<script>
import { mapState } from "vuex"
export default {name: 'vuexUsed',components: {},data () {return {state_personOne: null,state_productsNum: null}},computed: {/*  1.  state -- 应用获取 store 仓库中 state 中 存储的 数据第一种方式：直接通过 this.$store.state 获取   例：this.$store.state.moduleA.scheduleTypeEnum（官方建议此方法写到计算属性中，让代码显得优雅）第二种方式：引入vuex的mapState方法，再把相关的解构到methods中，用this直接调用，即可 （官方推荐使用第二种）*/// 例：第一种方式写在 computed 中getScheduleTypeEnum () {return this.$store.state.moduleA.scheduleTypeEnum},//注意： 按功能进行模块划分后，如下方法行不通，输出为 undefined//     XXXX  此方法错误   XXXX// error :  ...mapState(["scheduleTypeEnum"]),// 需采用此  开启了 namespaced命名空间后的  方法 （官方建议mapState写到计算属性中，让代码显得优雅）...mapState("moduleA", ['scheduleTypeEnum', "personOne", "productsNum"]),},created () { },mounted () {// statethis.state_personOne = this.personOnethis.state_productsNum = this.productsNumconsole.log(this.getScheduleTypeEnum, "state -- getScheduleTypeEnum")console.log(this.scheduleTypeEnum, "state -- scheduleTypeEnum")},methods: {}
}
</script><template><div class="page-vuexUsed"><div>{{scheduleTypeEnum}}</div><ul><li>state.personOne:{{state_personOne}}</li><li>state.personOne:{{state_productsNum}}</li></ul></div>
</template>

3.2 getter

<script>
import { mapGetters } from "vuex"
export default {name: 'vuexUsed',components: {},data () {return {}},computed: {/*  2.  getters -- 应用调用 store 仓库中 getters 中 封装的 方法第一种方式：直接通过 this.$store.getters 调用   例：this.$store.getters["moduleA/changePersonOne"]第二种方式：引入vuex的mapGetters方法，再把相关的getters解构到methods中，用this直接调用，即可 （官方推荐使用第二种）*/// 例：第一种方式写在 computed 中changePersonOne1 () {return this.$store.getters["moduleA/changePersonOne"]},// 解构 总store 中 moduleA里的getters方法...mapGetters("moduleA", ['changePersonOne']),},created () { },mounted () {// gettersconsole.log(this.changePersonOne1, "getters -- changePersonOne1")console.log(this.changePersonOne, "getters -- changePersonOne")},methods: {}
}
</script><template><div class="page-vuexUsed"></div>
</template>

3.3 mutation

<script>
import { mapMutations } from "vuex"
export default {name: 'vuexUsed',components: {},data () {return {state_personOne: null,state_productsNum: null}},computed: {},created () {},mounted () {},methods: {/* 3.  mutation -- 应用调用 store 仓库中 actions 中封装的 同步方法第一种方式：(官方建议  传值修改时，传入一个对象，让代码看起来更美观)直接通过this.$store。commit 调用    例：固值修改方法调用：  this.$store.commit("moduleA/changeProductsNum")传值修改方法调用：  this.$store.commit("moduleA/changePersonOneName",{newName:"Li Si"})*/// 解构 总store 中 moduleA里面的同步方法...mapMutations("moduleA", ["changePersonOneName", "changeProductsNum"]),change_state_personOne () {// 直接调用 mutations 同步方法// this.$store.commit("moduleA/changePersonOneName", { newName: "Li Si" })// this.state_personOne = this.personOne// 解构调用 mutations 同步方法this.changePersonOneName({ newName: "Li Si" })// 再把 state 中更改过后的值 赋给当前页面 data 中的数据this.state_personOne = this.personOne},change_state_productsNum () {// 直接调用 mutations 同步方法// this.$store.commit("moduleA/changeProductsNum")// this.state_productsNum = this.productsNum// 解构调用 mutations 同步方法this.changeProductsNum()this.state_productsNum = this.productsNum}}
}
</script><template><div class="page-vuexUsed"><div>{{scheduleTypeEnum}}</div><ul><li>state.personOne:{{state_personOne}}</li><li>state.personOne:{{state_productsNum}}</li><li><button @click="change_state_personOne">change_state_personOne</button><button @click="change_state_productsNum" style="margin-left:50px">change_state_productsNum</button></li></ul></div>
</template>

3.4 action

<script>
import { mapActions } from "vuex"
export default {name: 'vuexUsed',components: {},data () {return {}},computed: {},created () { },mounted () {/*  4.  actions -- 应用调用 store 仓库中 actions 中 封装的 异步方法第一种方式：直接通过 this.$store.dispatch 调用   例：this.$store.dispatch('getUserInfo')第二种方式：引入vuex的mapActions方法，再把相关的actions解构到methods中，用this直接调用，即可 （官方推荐使用第二种） */this.$store.dispatch('moduleA/getUserInfo')this.getUserInfo()},methods: {// 解构 总store 中 moduleA里的异步方法...mapActions("moduleA", ["getUserInfo"]),}
}
</script><template><div class="page-vuexUsed"></div>
</template>

3.5 module

由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。

为了解决以上问题，Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割。

此处因个人习惯和在大多数项目应用按功能模块进行划分的次数居多，只对按功能模块进行分隔进行说明，具体的使用可以参考本文，2.1部分。

4. 以上 在项目中引入vuex 提及的所有代码

4.1 store文件夹 (存放关于所有vuex模块数据逻辑的文件夹)

4.1.1 index.js (管理所有的module模块)

/* vuex状态管理仓库  的使用*   按功能进行拆分成 不同的 Module模块*/import Vue from 'vue'
import Vuex from 'vuex'// 引入功能模块  moduleA
import moduleA from "./modules/moduleA.js"
import moduleB from "./modules/moduleB.js"
import codeAutoData from "./codeAutoCreateData/codeAutoData.js"Vue.use(Vuex)export default new Vuex.Store({state: {},modules: {//  按功能拆分module模块后，把所有的功能模块 挂载到 总的 store 上moduleA,moduleB}
})

4.1.2 main.js(将 store 对象挂载到vue实例上)

import Vue from 'vue';
import App from './App.vue';// 引入  按功能模块进行划分的  vuex状态管理仓库
import store from './store/index.js'Vue.config.productionTip = false;(window as any).vm = new Vue({router,store, // 将 store 对象挂载到vue实例上render: (h) => h(App),
}).$mount('#app');

4.1.3 moduleA.js (按功能进行拆分的模块)

/*  *  根据功能进行拆分的功能模块一   -- moduleA*/
import axios from 'axios'
export default {// 命名空间必须打开，否则 namespaced: true, //开启命名空间 避免属性名冲突/* * state 相当于 vue 中的 data，存储的数据*/state: {userInfo: null,scheduleTypeEnum: [{value: 'IPI',description: '等额本金'},{value: 'EPI',description: '等额本息'},{value: 'IOI',description: '一次还本按频率结息'},{value: 'FPI',description: '利随本清'},{value: 'UDS',description: '用户自定义还款计划'}],personOne: "Zhang San",productsNum: 0},/* *getters 相当于 computed 计算属性*/getters: {// 修改personOne(使用情形：很多页面使用到personOne,需要修改)changePersonOne(state) {return `hello ${state.personOne}`}},/* * mutations 执行 同步操作*/mutations: {// 固值更改changeProductsNum(state) {state.productsNum++},// 传值更改changePersonOneName(state, newName) {state.personOne = newName.newName}},/* * actions 执行 异步操作*/actions: {// 调取获取用户信息 mock接口getUserInfo() {axios.get("/user/userInfo").then(res => {console.log(res.data.data, "actions -- getUserInfo")})}}
}

4.1.4 moduleB.js (按功能进行拆分的模块)

/*  *  根据功能进行拆分的功能模块一   -- moduleB*/
export default {state: {},getters: {},mutations: {},actions: {}
}

4.1.5 vuexUsed.vue (具体使用vuex的文件)

<!--* @description: vuex状态管理仓库  的使用该功能页采用 modules模块划分 并开启了 namespaced命名空间（多个store仓库挂载到一个总的 store上），与单独一个store使用有所区别
-->
<script>
import { mapState, mapGetters, mapMutations, mapActions } from "vuex"
export default {name: 'vuexUsed',components: {},data () {return {state_personOne: null,state_productsNum: null}},computed: {/*  1.  state -- 应用获取 store 仓库中 state 中 存储的 数据第一种方式：直接通过 this.$store.state 获取   例：this.$store.state.moduleA.scheduleTypeEnum（官方建议此方法写到计算属性中，让代码显得优雅）第二种方式：引入vuex的mapState方法，再把相关的解构到methods中，用this直接调用，即可 （官方推荐使用第二种）*/// 例：第一种方式写在 computed 中getScheduleTypeEnum () {return this.$store.state.moduleA.scheduleTypeEnum},//注意： 按功能进行模块划分后，如下方法行不通，输出为 undefined//     XXXX  此方法错误   XXXX// error :  ...mapState(["scheduleTypeEnum"]),// 需采用此  开启了 namespaced命名空间后的  方法 （官方建议mapState写到计算属性中，让代码显得优雅）...mapState("moduleA", ['scheduleTypeEnum', "personOne", "productsNum"]),/*  2.  getters -- 应用调用 store 仓库中 getters 中 封装的 方法第一种方式：直接通过 this.$store.getters 调用   例：this.$store.getters["moduleA/changePersonOne"]第二种方式：引入vuex的mapGetters方法，再把相关的getters解构到methods中，用this直接调用，即可 （官方推荐使用第二种）*/// 例：第一种方式写在 computed 中changePersonOne1 () {return this.$store.getters["moduleA/changePersonOne"]},// 解构 总store 中 moduleA里的getters方法...mapGetters("moduleA", ['changePersonOne']),},created () { },mounted () {// statethis.state_personOne = this.personOnethis.state_productsNum = this.productsNumconsole.log(this.getScheduleTypeEnum, "state -- getScheduleTypeEnum")console.log(this.scheduleTypeEnum, "state -- scheduleTypeEnum")// gettersconsole.log(this.changePersonOne1, "getters -- changePersonOne1")console.log(this.changePersonOne, "getters -- changePersonOne")/*  4.  actions -- 应用调用 store 仓库中 actions 中 封装的 异步方法第一种方式：直接通过 this.$store.dispatch 调用   例：this.$store.dispatch('getUserInfo')第二种方式：引入vuex的mapActions方法，再把相关的actions解构到methods中，用this直接调用，即可 （官方推荐使用第二种） */this.$store.dispatch('moduleA/getUserInfo')this.getUserInfo()},methods: {// 解构 总store 中 moduleA里的异步方法...mapActions("moduleA", ["getUserInfo"]),/* 3.  mutation -- 应用调用 store 仓库中 actions 中封装的 同步方法第一种方式：(官方建议  传值修改时，传入一个对象，让代码看起来更美观)直接通过this.$store。commit 调用    例：固值修改方法调用：  this.$store.commit("moduleA/changeProductsNum")传值修改方法调用：  this.$store.commit("moduleA/changePersonOneName",{newName:"Li Si"})*/// 解构 总store 中 moduleA里面的同步方法...mapMutations("moduleA", ["changePersonOneName", "changeProductsNum"]),change_state_personOne () {// 直接调用 mutations 同步方法// this.$store.commit("moduleA/changePersonOneName", { newName: "Li Si" })// this.state_personOne = this.personOne// 解构调用 mutations 同步方法this.changePersonOneName({ newName: "Li Si" })// 再把 state 中更改过后的值 赋给当前页面 data 中的数据this.state_personOne = this.personOne},change_state_productsNum () {// 直接调用 mutations 同步方法// this.$store.commit("moduleA/changeProductsNum")// this.state_productsNum = this.productsNum// 解构调用 mutations 同步方法this.changeProductsNum()this.state_productsNum = this.productsNum}}
}
</script><template><div class="page-vuexUsed"><div>{{scheduleTypeEnum}}</div><ul><li>state.personOne:{{state_personOne}}</li><li>state.personOne:{{state_productsNum}}</li><li><button @click="change_state_personOne">change_state_personOne</button><button @click="change_state_productsNum" style="margin-left:50px">change_state_productsNum</button></li></ul></div>
</template><style lang="less" scoped>
.page-vuexUsed {
}
</style>

vuex的使用说明（个人专用）相关推荐

1. app上架专用软著认证电子版权在主流应用商店的使用说明2023年最新版

   软著认证电子版权在主流应用商店的使用说明 目录 一. 华为应用商店 二. 腾讯应用宝 三. 小米开放平台 小米应用提交: 小米游戏提交: 四. OPPO开放平台 OPPO应用提交: OPPO游戏(Ap ...

2. Vue 爬坑之路（六）—— 使用 Vuex + axios 发送请求

   Vue 原本有一个官方推荐的 ajax 插件 vue-resource,但是自从 Vue 更新到 2.0 之后,官方就不再更新 vue-resource 目前主流的 Vue 项目,都选择 axios ...

3. 【Windows 逆向】OD 调试器工具 ( 推荐汉化版的 OD 调试工具 | 吾爱破解专用版Ollydbg | 备选工具 )

   文章目录 一.吾爱破解专用版Ollydbg 二.运行 OD 工具 一.吾爱破解专用版Ollydbg 从 OD 官方网站 http://www.ollydbg.de/ 下载的 Ollydbg1.10 工 ...

4. vuex 源码分析_Vuex框架原理与源码分析

   Vuex是一个专为Vue服务,用于管理页面数据状态.提供统一数据操作的生态系统.它集中于MVC模式中的Model层,规定所有的数据操作必须通过 action - mutation - state ch ...

5. bootstrap框架菜单栏颜色设置_Bootstrap Icons - bootstrap专用的漂亮图标库，可以免费商用...

   专门为著名的前端开发 UI 框架 Bootstrap 的组件和文档定制开发的图标库. 介绍 Bootstrap 图标库 的设计初衷是与 Bootstrap 组件配合使用,从表单到导航组件等.Boots ...

6. 【对讲机的那点事】对讲机电池、充电器使用说明须知

   对讲机充电器.电池作为对讲机的标配, 在日常使用对讲机中,对讲机电池是属于损耗件,随着使用时间.频率的增加会减弱其使用性能: 不正确使用对讲机电池也会大大缩短电池的使用寿命.那么怎样才能正确使用对讲机 ...

7. 天黑请闭眼--杀吧专用（C#版 附源码）

   制作缘由: 最近真是爱上了这个古老的团队游戏了.还是喜欢面杀的感觉.现在每周都会跟朋友一起玩一玩. 然后回忆起上一年跟好朋友偶然去了一次邯郸的杀人吧,那种烟雾环绕的感觉和几个人嘶吼的感觉还真没引起我多 ...

8. 惠普计算机使用方法,惠普笔记本电脑功能键(HP/联想等笔记本键盘fn键使用说明大全)...

   惠普笔记本电脑功能键(HP/联想等笔记本键盘fn键使用说明大全),哪吒游戏网给大家带来详细的惠普笔记本电脑功能键(HP/联想等笔记本键盘fn键使用说明大全)介绍,大家可以阅读一下,希望这篇惠普笔记本电 ...

9. ISA SERVER常见问题总结专用贴(转)

   这个贴子专用总结ISA SERVER常见问题的解决方法,也欢迎大家把自己遇到的问题及其解决方法跟在此贴后,经确定其正确性后提交进总结,当然会写上总结者的大名. -------------------- ...

最新文章

1. 服务器创建和附加虚拟磁盘,Windows 7 虚拟硬盘中的新增功能
2. 稳定的手机端服务器,[Ktor] 实现移动端的 Ktor 服务器
3. android gradle 目录,Android Gradle：将目录列入文件
4. html中after伪类原理,css伪类before跟after原理与使用（原）
5. jQuery学习笔记--JqGrid相关操作 方法列表 备忘 重点讲解(超重要)
6. iOS开发时间戳与时间，时区的转换，汉字与UTF8,16进制的转换
7. java实例域静态域_有关java 实例域 静态域 静态方法
8. 剑指offer之 旋转数组的最小数字
9. 顺德机器人应用与维修专业收入_保定万维科技技校专业课程巡礼——计算机应用与维修...
10. Nmap命令的常用实例
11. WebService 的CXF框架 WS方式Spring开发
12. React 记坑 ----- 关于 react-redux 中共享状态更新时自动重新 render 页面的问题
13. 使用命令行 启动 各种服务（控制面板 开机启动项 注册表 等）
14. 可悲、可叹、可怜的TD-sdma
15. KVM虚拟化平台搭建实操+KVM理论详解
16. #前端# 万字总结！前端项目化超详细方法及思路！
17. 【Docker系列】 Docker secrets
18. “快充”拯救续航，雅迪难称王
19. 通过VIN码查询车型信息接口文档
20. 由圆上三点确定圆心和半径(附PythonMatlab程序)

热门文章

1. 当前时间转换成UTC时间
2. 大数据正在推动新零售发展
3. java 函数内定义函数_java可以在main中定义函数吗？
4. python随身笔记
5. slice 和 splice的区别是什么?
6. JS 数组打乱 Fisher–Yates shuffle(费舍尔-耶茨 洗牌)
7. PHP代码审计——任意文件删除漏洞（YXcms）
8. 通灵学院|游戏设计研习7：兴趣曲线★（1200字）
9. ODBC 驱动程序管理器 在指定的 DSN 中，驱动程序和应用程序之间的体系结构不匹配 解决方案
10. 大龄程序员~聊聊我毕业十年的生活