Vuex——超简单详细使用手册 vuex实战

connygpt 2024-10-11 11:56 4 浏览

之前在项目用到过Vuex,但用的时候都是前辈写好的结构，知其然而不知所以然，看了几篇博客以及官网的内容打算小小的整理一下，首先来抛玉引砖，推荐几个我觉得通俗易懂的博客：

未将状态使用Modules进行表达的：https://blog.csdn.net/u011068996/article/details/80216154

使用Modules进行表达的：https://segmentfault.com/a/1190000009404727

当然官网也很重要，虽然没有中文的但是可以翻译成中文页面（中英对照着看不然理解会有偏差）：https://vuex.vuejs.org/

（以下实际例子以vue-cli为背景进行）

Vuex（作用就是全局变量状态管理）

（1）什么都不说这个是真的重要：

（2）与全局变量的区别

vuex的state状态可以理解为响应式的双向改变；其次，其状态必须通过提交mutations进行改变

Vuex基本知识点指南（基本官网前几节）

注意：

.getters的第三个参数rootState,可进行跨模块调用state;
.state 是会根据组合时模块的别名来添加层级的【归于根state】,后面的 getters,mutations ,actions 都是合并在 store 下
.getters不可重名，重名报错；mutations与actions可重名，且重名访问时按照模块引入顺序依次触发

Vuex非模块使用实战

安装：npm install vuex --save

main.js中引入

src下建立store文件夹并建立index.js,内容如下：

组件中的访问（非map方式）

Vuex模块使用实战

1.安装【同上】

2.main.js中引入【同上】

3.src下store目录结构

各个文件内容：

4.组件访问（map方式演示）：

map方式知识点：

.mapState , mapGetters使用在computed，形成组件的data数据供后续使用
.mapMutations , mapActions 在methods，形成方法供后续使用
.mapMutations , mapActions , mapGetters三者首个参数是所属模块，后边是所需要调用的对应处理
.mapState中状态量获取时为：state.所属模块.状态名

vuexstore

上一篇：shopping开源项目用vue+vue-router+vuex实现电商网站基本功能
下一篇：Vuex的初探与实战小结 vuex的使用流程

Vuex——超简单详细使用手册 vuex实战

Vuex（作用就是全局变量状态管理）

Vuex基本知识点指南（基本官网前几节）

Vuex非模块使用实战

Vuex模块使用实战

相关推荐

在.net core中使用nginx做负载均衡

React 18 超全升级指南

LTUI v1.7 发布，一个基于 Lua 的跨平台字符终端 UI 界面库

生成对抗网络(GAN)的半监督学习

《若依ruoyi》第二十五章:Spring boot 上传下载封装详解二

QT进阶之路 : 布局详解

如何在 Element UI 中使用栅格布局实现响应式设计?

IDEA 中 Jetty 的配置操作手册 idea jfinal

如何在Dify平台上创建智能Agent:一步步教你实现超级智能体搭建

k8s自动化运维三