VueX详解

Vuex

  1. 主要应用于Vue.js中管理数据状态的一个库
  2. 通过创建一个集中的数据存储，供程序中所有组件访问

使用场景

  • 涉及到非父子关系的组件，例如兄弟关系、祖孙关系，甚至更远的关系组件之间的联系
  • 中大型单页应用，考虑如何更好地在组件外部管理状态

状态管理：

对于大型应用程序，有效地管理状态是至关重要的。Vuex是Vue.js的官方状态管理库，它提供了集中式的状态管理机制。通过学习Vuex的核心概念（state、mutations、actions、getters），你可以更好地组织和管理应用程序的状态。

核心概念：

  1. State（状态）：Vuex 使用单一状态树，即在一个对象中包含了全部应用层级的状态，这样可以方便进行状态的管理和维护。State 是存储数据的地方。

  2. Getters（获取器）：Getters 可以被看作是 store 的计算属性。你可以在 getter 中计算状态，这样可以在多个组件中复用计算逻辑。

  3. Mutations（变更）：Mutation 是唯一能够改变状态的方法。每个 mutation 都有一个字符串类型的事件类型和一个回调函数，该回调函数就是实际进行状态更改的地方。

  4. Actions（动作）：Actions 是用来提交 mutation 的方法。而不是直接变更状态，而是通过提交 mutation 的方式来变更状态。可以在 action 内部进行异步操作。

  5. Modules（模块）：当应用变得非常复杂时，store 对象会变得非常庞大。Vuex 允许我们将 store 分割成模块（modules），每个模块拥有自己的 state、getters、mutations 和 actions。

1.基本使用：

// 引入vue
import Vue  from 'vue'
// 引入vuex
import Vuex from 'vuex'
// 应用vue插件
//放这应该要在store前
Vue.use(Vuex)
​
// actions响应组件中的动作
const actions = {
}
​
// mutations操作数据state
const mutations = {
}
​
// 准备state存储数据
const state = {//状态对象
}
​
// 创建store并导出
const store = new Vuex.Store({actions,mutations,state,
})
​
//默认导出store
export default store

2.具体应用（选项式）

this.$store.commit('JIA',this.n)//直接走Mutation
​
this.$store.dispatch('jiaOdd',this.n)//走Action
//该文件用于创建Vuex中最为核心的store
​
import Vue from 'vue'
​
//引入Vuex
​
import Vuex from 'vuex'
​
//应用Vuex插件
​
Vue.use(Vuex)
​
​
//准备actions——用于响应组件中的动作
​
const actions = {
​/* jia(context,value){
​console.log('actions中的jia被调用了')
​context.commit('JIA',value)
​},
​jian(context,value){
​console.log('actions中的jian被调用了')
​context.commit('JIAN',value)
​}, */
​jiaOdd(context,value){
​console.log('actions中的jiaOdd被调用了')
​if(context.state.sum % 2){
​context.commit('JIA',value)
​}
​},
​jiaWait(context,value){
​console.log('actions中的jiaWait被调用了')
​setTimeout(()=>{
​context.commit('JIA',value)
​},500)
​}
​
}
​
//准备mutations——用于操作数据（state）
​
const mutations = {
​JIA(state,value){
​console.log('mutations中的JIA被调用了')
​state.sum += value
​},
​JIAN(state,value){
​console.log('mutations中的JIAN被调用了')
​state.sum -= value
​}
​
}
​
//准备state——用于存储数据
​
const state = {
​sum:0 //当前的和
​
}
​
​
​
//创建并暴露store
​
export default new Vuex.Store({
​actions,
​mutations,
​state,
​
})

3.Vuex其他配置：

getters(将state中的数据进行加工)
//所需原始数据*/,计算属性
​
//准备getters——用于将state中的数据进行加工
​
const getters = {
​bigSum(state){return state.sum*10}
​
}
​
//取
this.$store.getters.bigSum

对象运算符


... 展开运算符（spread operator）允许一个表达式在某处展开。展开运算符在多个参数（用于函数调用）或多个元素（用于数组字面量）或者多个变量（用于解构赋值）的地方可以使用。

展开运算符不能用在对象当中，因为目前展开运算符只能在可遍历对象（iterables）可用。iterables的实现是依靠[Symbol.iterator]函数，而目前只有Array,Set,String内置[Symbol.iterator]方法，而Object尚未内置该方法，因此无法使用展开运算符。

mapState(读取State中数据)
//借助mapState生成计算属性，从state中读取数据。（数组写法）
...mapState(['sum','school','subject']),
​
//借助mapState生成计算属性，从state中读取数据。（对象写法）
// ...mapState({he:'sum',xuexiao:'school',xueke:'subject'}),
mapGetters(读取getter中数据)
//借助mapGetters生成计算属性，从getters中读取数据。（数组写法）
​
...mapGetters(['bigSum'])
​
//借助mapGetters生成计算属性，从getters中读取数据。（对象写法）
// ...mapGetters({bigSum:'bigSum'})
mapMutations
//借助mapMutations生成对应的方法，方法中会调用commit去联系mutations(对象写法)...mapMutations({increment:'JIA',decrement:'JIAN'}),
​
//借助mapMutations生成对应的方法，方法中会调用commit去联系mutations(数组写法)
// ...mapMutations(['JIA','JIAN']),
mapActions
 //借助mapActions生成对应的方法，方法中会调用dispatch去联系actions(对象写法)...mapActions({incrementOdd:'jiaOdd',incrementWait:'jiaWait'})
​
​//借助mapActions生成对应的方法，方法中会调用dispatch去联系actions(数组写法)// ...mapActions(['jiaOdd','jiaWait'])

Tip:mapActions与mapMutations使用时，若需要传递参数需要:在模板中绑定事件时传递好参数，否则参数是事件对象。（MapActions与MapMutations传参）

4.Modules

使用单一状态树，导致应用的所有状态集中到一个很大的对象。但是，当应用变得很大时，store 对象会变得臃肿不堪。

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

const moduleA = {state: { ... },mutations: { ... },actions: { ... },getters: { ... }
}const moduleB = {state: { ... },mutations: { ... },actions: { ... }
}const store = new Vuex.Store({modules: {a: moduleA,b: moduleB}
})store.state.a // -> moduleA 的状态
store.state.b // -> moduleB 的状态

模块的局部状态

对于模块内部的 mutation 和 getter，接收的第一个参数是模块的局部状态,对于模块内部的 getter，根节点状态会作为第三个参数:

const moduleA = {state: { count: 0 },mutations: {increment (state) {// state 模块的局部状态state.count++}},getters: {doubleCount (state) {return state.count * 2},sumWithRootCount (state, getters, rootState) {return state.count + rootState.count}}

模块内部的 action，context.state 是局部状态，根节点的状态是 context.rootState:

const moduleA = {// ...actions: {incrementIfOddOnRootSum (context) {if ((context.state.count + context.rootState.count) % 2 === 1) {commit('increment')}}}
}

5.VueX 高级 

组合式API写法

组合式API：http://t.csdnimg.cn/WWEmT

组合式API与Vuex

可以通过调用 useStore 函数，来在 setup 钩子函数中访问 store。这与在组件中使用选项式 API 访问 this.$store 是等效的。

import { useStore } from 'vuex'export default {setup () {const store = useStore()}
}

为了访问 state 和 getter，需要创建 computed 引用以保留响应性，这与在选项式 API 中创建计算属性等效。

import { computed } from 'vue'
import { useStore } from 'vuex'export default {setup () {const store = useStore()return {// 在 computed 函数中访问 statecount: computed(() => store.state.count),// 在 computed 函数中访问 getterdouble: computed(() => store.getters.double)}}
}

要使用 mutation 和 action 时，只需要在 setup 钩子函数中调用 commit 和 dispatch 函数

import { useStore } from 'vuex'export default {setup () {const store = useStore()return {// 使用 mutationincrement: () => store.commit('increment'),// 使用 actionasyncIncrement: () => store.dispatch('asyncIncrement')}}
}

插件与Vuex

Vue插件推荐博客：http://t.csdnimg.cn/ohptY

（待完善）

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/744946.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

洛谷 P5018 对称二叉树

洛谷 P5018 对称二叉树

题目背景 NOIP2018 普及组 T4 题目描述 一棵有点权的有根树如果满足以下条件，则被轩轩称为对称二叉树： 二叉树；将这棵树所有节点的左右子树交换，新树和原树对应位置的结构相同且点权相等。 下图中节点内的数字为权值&#xf…
阅读更多...
window server2012 卸载iis后，远程连接黑屏

window server2012 卸载iis后，远程连接黑屏

原因分析： 因为自己在卸载IIS的时候，不小心卸载了.net framework，系统没有了图形界面（由完整模式Full变为了核心模式core），需要重新恢复.net framework4.5。 解决方法分析： 需要将核心模式co…
阅读更多...
基于Vue移动端电影票务服务APP设计与实现

基于Vue移动端电影票务服务APP设计与实现

目 录 摘 要 I Abstract II 引 言 1 1 相关技术 3 1.1 Vue框架 3 1.2 数据库MongoDB 3 1.3 Axios请求 3 1.4 H5、CSS3和JavaScript 4 1.5 本章小结 4 2 系统分析 5 2.1 功能需求 5 2.2 用例分析 5 2.3 用户功能 6 2.4本章小结 6 3 基于Vue电影票务服务APP设计 7 3.1 页面设计 …
阅读更多...
YOLOv9改进策略：注意力机制 |通道注意力和空间注意力CBAM | GAM超越CBAM，不计成本提高精度

YOLOv9改进策略：注意力机制 |通道注意力和空间注意力CBAM | GAM超越CBAM，不计成本提高精度

💡💡💡本文改进内容：通道注意力和空间注意力CBAM，全新注意力GAM：超越CBAM，不计成本提高精度 改进结构图如下： YOLOv9魔术师专栏 ☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️…
阅读更多...
Kotlin/Java中String的equals和==

Kotlin/Java中String的equals和==

Kotlin/Java中String的equals和 在Java中，如果定义一个常量String和new出一个String对象，是不同的： String s1 "zhang" String s2 new String("zhang") 因为在Java看来，s1只是一个常量，会放在…
阅读更多...
Let’s Move Sui , 一起来学习吧

Let’s Move Sui , 一起来学习吧

Let’s Move Sui是一个全新的交互式学习平台，通过SuiFrens的帮助教您如何在Sui上构建。设计供新手和经验丰富的开发者使用，Let’s Move Sui提供了一次非凡的Sui开发之旅，利用了Move在Sui上的独特之处，从基于对象的数据模型的基础知…
阅读更多...
飞桨图像分割套件PaddleSeg初探

飞桨图像分割套件PaddleSeg初探

飞桨图像分割套件PaddleSeg初探 PaddleSeg是基于飞桨PaddlePaddle的端到端图像分割套件，内置45模型算法及140预训练模型，支持配置化驱动和API调用开发方式，打通数据标注、模型开发、训练、压缩、部署的全流程，提供语义分割、交互式…
阅读更多...
项目性能优化—性能优化的指标、目标

项目性能优化—性能优化的指标、目标

项目性能优化—性能优化的指标、目标 性能优化的终极目标是什么 性能优化的目标实际上是为了更好的用户体验： 一般我们认为用户体验是下面的公式： 用户体验 产品设计（非技术） 系统性能 ≈ 系统性能 快 那什么样的体验叫快呢…
阅读更多...
交换机/路由器的存储介质-华三

交换机/路由器的存储介质-华三

交换机/路由器的存储介质-华三 本文主要介绍网络设备的存储介质组成。 ROM(read-only memory，只读存储器) 用于存储 BootROM程序。BootROM程序是一个微缩的引导程序，主要任务是查找应用程序文件并引导到操作系统，在应用程序文件或配置文件出…
阅读更多...
Learn OpenGL 10 Assimp+网格+模型

Learn OpenGL 10 Assimp+网格+模型

Assimp 一个非常流行的模型导入库是Assimp，它是Open Asset Import Library（开放的资产导入库）的缩写。Assimp能够导入很多种不同的模型文件格式（并也能够导出部分的格式），它会将所有的模型数据加载至Assim…
阅读更多...
WebAssembly探索篇（四）emcc和cmake编译opencv复杂案例

WebAssembly探索篇（四）emcc和cmake编译opencv复杂案例

文章目录 开发环境工程目录CMakeLists.txtmain.cpp web端index.html效果图 遇到的问题JS与C传值Uncaught TypeError: Module._malloc is not a functioncanvas像素RGBA四通道 经验&&教训参考 最近因为项目原因，研究了一下WebAssembly。2015年上线与JS、HTML…
阅读更多...
C语言——详解字符函数和字符串函数(一）

C语言——详解字符函数和字符串函数(一）

Hi,铁子们好呀！今天博主来给大家更一篇C语言的字符函数和字符串函数~ 具体讲的内容如下： 文章目录 🎆1.字符分类函数💯💯⏩1.1 什么是字符分类函数的？💯💯⏩1.2 字符函数的类型有哪…
阅读更多...
基于Python的中医药知识问答系统设计与实现

基于Python的中医药知识问答系统设计与实现

[简介] 这篇文章主要介绍了基于Python的中医药知识问答系统的设计与实现。该系统利用Python编程语言，结合中医药领域的知识和技术，实现了一个功能强大的问答系统。文章首先介绍了中医药知识的特点和传统问答系统的局限性，然后提出了设计思路…
阅读更多...
【Java探索之旅】运算符解析 算术运算符，关系运算符

【Java探索之旅】运算符解析 算术运算符，关系运算符

🎥 屿小夏 ： 个人主页 🔥个人专栏 ： Java编程秘籍 🌄 莫道桑榆晚，为霞尚满天！ 文章目录 📑前言一、什么是运算符二、算术运算符2.1 基本四则运算（-*/%）2.2 增…
阅读更多...
ThreadLocal基本原理

ThreadLocal基本原理

ThreadLocal基本原理 一、定义 ThreadLocal是java中所提供的线程本地存储机制，可以利用改机制将数据缓存在线程内部，该线程可以在任意时刻、任意方法中获取数据 二、底层原理 ThreadLocal底层是通过ThreadLocalMap来实现的，每个Thread对象中…
阅读更多...
Java代码基础算法练习---2024.3.14

Java代码基础算法练习---2024.3.14

其实这就是从我学校的资源，都比较基础的算法题，先尽量每天都做1-2题，练手感。毕竟离我真正去尝试入职好的公司（我指的就是中大厂，但是任重道远啊），仍有一定的时间，至少要等我升本之后…
阅读更多...
安装nginx

安装nginx

Nginx ("engine x") 是一个高性能的HTTP和反向代理服务器，特点是占有内存少，并发能力强，事实上nginx的并发能力确实在同类型的网页服务器中表现较好，中国大陆使用nginx网站用户有：百度、京东、新浪、网易、腾…
阅读更多...
Sui技术帮助Studio Mirai成功实现创意愿景

Sui技术帮助Studio Mirai成功实现创意愿景

Brian和Ben Li兄弟对艺术充满热情，通过共同创立的研发工作室Studio Mirai，他们正在探索Web3技术与创意产业的交集。 Studio Mirai的第一个头像类项目（profile picture，PFP）Tamashi存在于Nozomi World中，这…
阅读更多...
备战蓝桥杯Day25 - 二叉搜索树

备战蓝桥杯Day25 - 二叉搜索树

一、基本概念 二叉搜索树（Binary Search Tree），又称为二叉查找树或二叉排序树，是一种具有特定性质的二叉树。 定义：二叉搜索树可以是一棵空树，也可以是具有以下特性的非空二叉树： 若其左子树不…
阅读更多...
【Memcached】

【Memcached】

memcached 有一个很大的缺陷不能持久化，不能存储在硬盘里 1.NoSQL介绍 NoSQL是对 Not Only SQL、非传统关系型数据库的统称。 NoSQL一词诞生于1998年，2009年这个词汇被再次提出指非关系型、分布式、不提供ACID的数据库设计模式。 随着互联网时代的到…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023