当前位置： 首页 > news >正文

vue学习笔记（十）——Vuex（状态管理，组件间共享数据）

news 来源：原创 2024/9/22 1:09:44

1. vuex基础-介绍

1.1 为什么会有Vuex ?

        在现代 Web 开发复杂多变的需求驱动之下，组件化开发已然成为了事实上的标准。然而大多数场景下的组件都并不是独立存在的，而是相互协作共同构成了一个复杂的业务功能。

        组件间的通信成为了必不可少的开发需求。

1.2 Vuex介绍

        Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
        Vuex是采用集中式管理组件依赖的共享数据的一个工具， 可以解决不同组件数据共享的问题。

state：状态
mutation：突变；（生物物种的）变异；（形式或结构的）转变；改变
action：行为；（身体部位的）动作；活动；操作；措施；

结论
        ① 修改state状态必须通过mutations
        ② mutations只能执行同步代码，类似ajax，定时器之类的代码不能在mutations中执行
        ③ 执行异步代码，要通过actions，然后将数据提交给mutations才可以完成
        ④ state的状态即共享数据可以在组件中引用
        ⑤ 组件中可以调用action

2. vuex基本使用

① 下载vuex
     yarn add vuex --save（-S）或 npm i vuex --save
        说明： vue 2.0版本命令：yarn add vuex@3 --save（-S）或 npm i vuex@3 --save，否则版本不兼容
-S 与 --save 的简写，安装包信息会写入 dependencies 中
-D 与 --save-dev 的简写，安装包写入 devDependencies 中
dependencies 与 devDependencies
        dependencies 生产阶段的依赖，也就是项目运行时的依赖，项目上线运行时依然需要的
        devDependencies 开发阶段的依赖，就是我们在开发过程中需要的依赖，只在开发阶段起作用的

② 引入

        在main.js中 import Vuex from 'vuex'

③ 注册

在main.js中 Vue.use(Vuex) => 调用了 vuex中的 一个install方法

④ 实例化对象

⑤ 注入vue实例

3. vuex-state使用

        state是放置所有公共状态的属性，如果你有一个公共状态数据 ， 你只需要定义在 state对象中。类似与data。

// 初始化vuex对象
const store = new Vuex.Store({state: {// 管理数据count: 0}
})

3.1 如何在组件中获取count?

① 原始形式- 插值表达式

        组件中可以使用 this.$store 获取到vuex中的store对象实例，可通过state属性属性获取count， 如下：

<div> state的数据：{{ $store.state.count }}</div>

② 计算属性 - 将state属性定义在计算属性中

// 把state中数据，定义在组件内的计算属性中  
computed: {    count () {      return this.$store.state.count    }  
}
 <div> state的数据：{{ count }}</div>

③ 辅助函数 - mapState        

        mapState是辅助函数，帮助我们把store中的数据映射到 组件的计算属性中, 它属于一种方便用法。
用法 ：
        第一步：导入mapState 

import { mapState } from 'vuex'

        第二步：采用数组形式引入state属性

mapState(['count'])

        第三步：利用延展运算符将导出的状态映射给计算属性

computed: {...mapState(['count'])
}
 <div> state的数据：{{ count }}</div>

4. vuex-mutations使用

使用上述的 addCount 方法，点击按钮后，网页中展示的 count 值会加1，但是vuex中共享状态state中的count值不会+1，如下图所示。

        这是因为state数据的修改只能通过mutations，并且mutations必须是同步更新，目的是形成数据快照 。数据快照：一次mutation的执行，立刻得到一种视图状态，因为是立刻，所以必须是同步。

4.1 定义mutations

        mutations是一个对象，对象中存放修改state的方法

const store  = new Vuex.Store({state: {count: 0},// 定义mutationsmutations: {// 方法里参数 第一个参数是当前store的state属性// payload 载荷 运输参数 调用 mutaiions 的时候 可以传递参数 传递载荷addCount (state, payload) {state.count += payload}}
})

4.2 如何在组件中调用mutations中的方法（提交）

① 原始形式调用

<template><button @click="addCountTest">原始方式调用，点击按钮state的值+ 10</button>
</template><script>
export default {methods: {// 原始方式调用方法addCountTest() {// 调用store中的mutations 提交给 muations// commit('muations名称', 参数)this.$store.commit('addCount', 10)  // 直接调用mutations}}
}
</script>

② 辅助函数形式-mapMutations

        mapMutations和mapState很像，它把位于mutations中的方法提取了出来，我们可以将它导入

<template><button @click="addCount(100)">原始方式调用，点击按钮state的值+ 100</button>
</template><script>
import  { mapMutations } from 'vuex'
export default {methods: {...mapMutations(['addCount'])}
}
</script>

        上面代码的含义是将mutations的方法导入了methods中，等同于原始方式的调用。但是请注意： Vuex中mutations中要求不能写异步代码，如果有异步的ajax请求，应该放置在actions中。

5. vuex-actions使用

        state是存放数据的，mutations是同步更新数据，actions则负责进行异步操作

5.1 定义actions

const store  = new Vuex.Store({state: {count: 0},mutations: {addCount (state, payload) {state.count += payload}},//  获取异步的数据actions: { // context 表示当前的 store 的实例 // 可以通过 context.state 获取状态 // 也可以通过 context.commit 来提交 mutations // 也可以 context.diapatch 调用其他的 actiongetAsyncCount (context，val) {setTimeout (() => {// 模拟异步请求// 一秒钟之后 要给一个数 去修改statecontext.commit('addCount', val)}, 1000)}} 
})

5.2 组件中对actions中的异步方法调用(派遣)

① 原始形式调用

<template><div><button @click="add(222)">原始形式异步调用，点击 + 222</button></div>
</template><script>
export default {methods: {add(val) {// dispatch 派遣 发送this.$store.dispatch('getAsyncCount',val)}}
}
</script>

② 辅助函数形式-mapActions

        actions也有辅助函数，可以将action导入到组件中

<template><div><button @click="getAsyncCount(222)">辅助函数形式异步调用，点击 + 222</button></div>
</template><script>
import { mapActions } from 'vuex'
export default {methods: {...mapActions(['getAsyncCount'])
}
</script>

6. vuex-getters（类似过滤器）

        除了state之外，有时我们还需要从state中派生出一些状态，这些状态是依赖state的，此时会用到getters

        例如，state中定义了list，为1-10的数组，

state: {list: [1,2,3,4,5,6,7,8,9,10]
}

        组件中，需要显示所有大于5的数据，正常的方式，是需要list在组件中进行再一步的处理，但是getters可以帮助我们实现它

6.1 定义getters

 getters: {// getters函数的第一个参数是 state// 必须要有返回值filterList: (state) => {return state.list.filter((item) => {return item > 5})
}

6.2 使用getters

① 原始方式

<div>{{ $store.getters.filterList }}</div>

② 辅助函数 - mapGetters


<template><div><div>{{ filterList }}</div></div>
</template><script>
import { mapGetters} from 'vuex'
export default {computed: {...mapGetters(['filterList'])
}
</script>

vuex中state、mutations、actions、getters使用的详细代码如下：

main.js

import Vue from 'vue'
import App from './App.vue'
//  下载，引入，注册，实例化对象，注入
import Vuex from 'vuex'
Vue.use(Vuex)const store = new Vuex.Store({//  共享的数据，类似于 data，在计算属性中使用state: {count : 0,list: [1,2,3,4,5,6,7,8,9,10]},//  更改共享的状态，必须使用 mutations 中的提交方法mutations: {//  第一参数 state 是当前 store 中的 state 属性addCount(state, payload) {return state.count += payload}},// 通过 action修改异步任务中的数据，派遣 mutations中的方法提交actions: {//  使用延时函数来模拟异步请求// context 表示当前的 store 的实例 asyncAddCount (context, val) {return setTimeout(() => {context.commit('addCount', val)},1000)}},getters: {// getters里函数的第一个参数是 state// 必须要有返回值filterList: (state) => {return state.list.filter((item) => {return item > 5})}}
})Vue.config.productionTip = falsenew Vue({store,render: h => h(App)
}).$mount('#app')

组件中的应用：

<template><div><p>原始方式调用state里count的值:<span>{{ $store.state.count }}</span></p><p>使用计算属性的方式调用state里count的值: <span>{{ count2 }}</span></p><p>使用辅助函数的形式调用state里count的值: {{ count }}</p><button @click="addCountTest">使用原始的方式修改count的值 + 1</button><button @click="addCount(123)">使用辅助函数的方式修改count的值 + 123</button> <hr><p>在组件中对actions中的异步方法进行调用</p><button @click="asyncAdd">原始方式异步派遣count值 + 333</button><button @click="asyncAddCount(444)">辅助函数方式异步派遣count值 + 444</button><hr><p>原始方式调用list中大于5的值为: {{ $store.getters.filterList }}</p><p>辅助函数方式调用list中大于5的值为: {{ filterList }}</p></div>
</template><script>
import { mapState } from 'vuex';
import { mapMutations } from 'vuex';
import { mapActions } from 'vuex';
import { mapGetters } from 'vuex';
export default {computed: {count2 () {return this.$store.state.count},// mapState 方法以数组的方式引入到计算属性中，所以需要使用扩展运算符 ...映射出 count的值 ...mapState(['count']),...mapGetters(['filterList'])},methods: {//  虽然网页中的值会加 1，但是 vuex中 state 中的 count 值不会变化，// 因为 state 中的数据只能通过 mutations 中的方法进行修改，所以此种方式是错误的方法 // addCountTest () {//   this.$store.state.count += 1// }addCountTest() {//  提交 mutations 中的 addCount 方法this.$store.commit('addCount', 1)},//  使用辅助函数的形式...mapMutations(['addCount']),//  派遣 actions 中的 asyncAddCount 方法asyncAdd () {this.$store.dispatch('asyncAddCount',333)},...mapActions(['asyncAddCount'])}
}
</script><style></style>

7. 总结口诀（重点）

7.1 vuex 基本使用

下载，引入，注册，对象，注入

下载vuex的版本记得与vue的版本匹配

state相当于data，组件里使用用computed

mutations中的方法（methods）用于同步提交（commit）使用，方法里的第一个参数为state，第二个参数为传递参数payLoad。

actions中的方法（methods）只能异步派遣（dispatch）mutations中的提交（commit）使用，方法里的第一个参数上下文（context）为当前 store 实例，第二个参数为传递的值。

getters相当于过滤器，过滤 state 中的数据，方法里的第一个参数是为state。

辅助函数形式使用需要用map数组引入，拓展三点（...）映射。

8. Vuex中的模块化-Module

8.1 为什么会有模块化？

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

        这句话的意思是，如果把所有的状态都放在state中，当项目变得越来越大的时候，Vuex会变得越来越难以维护。由此，又有了Vuex的模块化。

8.2 模块化的简单应用

定义两个模块   user 和  setting
        user中管理用户的状态  token 
        setting中管理 应用的名称 name

const store  = new Vuex.Store({modules: {user: {state: {token: '12345'}},setting: {state: {name: 'Vuex实例'}}})

① 定义child-b组件，用原始方式分别显示用户的token和应用名称name

<template><div><div>用户token {{ $store.state.user.token }}</div><div>网站名称 {{ $store.state.setting.name }}</div></div>
</template>

请注意： 此时要获取子模块的状态 需要通过 $store.state.模块名称.属性名 来获取

② getters方式分别显示用户的token和应用名称name

const store = new Vuex.Store({getters: {token: (state) => {return state.user.token},name: (state) => {return state.setting.name}},modules: {// 放置子模块user: {state: {token: '123456'},setting: {state: {name: '刘建超'}}}
})
<template><div><div>用户token {{ token }}</div><div>网站名称 {{ name }}</div></div>
</template>
<script>
import { mapGetters } from 'vuex';export default {computed: {...mapGetters(['token','name']),}
}
</script>

8.3 模块化中的命名空间

① 命名空间 namespaced

        默认情况下，模块内部的 action、mutation 和 getter 是注册在全局命名空间的——这样使得多个模块能够对同一 mutation 或 action 作出响应。这句话的意思是 刚才的user模块还是setting模块，它的 action、mutation 和 getter 其实并没有区分，都可以直接通过全局的方式调用。

        如：user子模块中的 mutation 的updatedToken可以通过全局的方式调用。

const store = new Vuex.Store({modules: {// 放置子模块user: {state: {token: '123456'},mutations: {updatedToken(state) {state.token = '6789'}},actions: {}}
})

通过mapMutations调用

 methods: {...mapMutations(['updateToken'])}<button @click="updateToken">修改token</button>

但是，如果我们想保证内部模块的高封闭性，我们可以采用namespaced来进行设置。

高封闭性？可以理解成 一家人如果分家了，此时，你的爸妈可以随意的进出分给你的小家，你觉得自己没什么隐私了，我们可以给自己的房门加一道锁（命名空间 namespaced）,你的父母再也不能进出你的小家了。如：

const store = new Vuex.Store({modules: {// 放置子模块user: {// 加一道锁，使得全局不能访问子模块中的方法namespaced: true,state: {token: '123456'},mutations: {//  这里的state表示的是user的stateupdatedToken(state) {state.token = '6789'}},actions: {}}
})

② 使用带命名空间的模块 action/mutations

方案1：直接调用-带上模块的属性名路径

test () {this.$store.commit('user/updateToken') // 直接调用方法
}

方案2：辅助函数-带上模块的属性名路径

import { mapMutations } from 'vuex'; 
methods: {...mapMutations(['user/updateToken']),// 这里相当于导入这个updateToken函数test () {this['user/updateToken']()// 在这里通过 this 的方式调用了updateToken 函数// 相当于对象中去获取属性值的两种方式，一种是通过对象.属性名的方式// 另一种是 对象['属性名']}}<button @click="test">修改token</button>

方案3： createNamespacedHelpers 创建基于某个命名空间辅助函数

import { createNamespacedHelpers } from 'vuex'
const { mapMutations } = createNamespacedHelpers('user')
export default {methods: {...mapMutations(['updatedToken'])}
}
<button @click="updateToken">修改token2</button>

相关文章：

  • 北京网站建设多少钱？
  • 辽宁网页制作哪家好_网站建设
  • 高端品牌网站建设_汉中网站制作
  • 极狐GitLab 如何管理 PostgreSQL 扩展？
  • 系统架构设计师教程（清华第二版） 第3章 信息系统基础知识-3.2 业务处理系统-解读
  • Android构建任务assemble、bundle、compile、package、install
  • python如何创建SQLite 数据库连接，如何将数据库存储在内存中？
  • git clone加速
  • huawei USG6001v1学习---防火墙相关知识（2）
  • Java基础编程500题——String
  • Kubernetes Service 之 LoadBalancer
  • Proxyman for Mac v5.6.1 抓包调试工具
  • 【Qt+opencv】计时函数与图像变换
  • AGI 之 【Hugging Face】 的【零样本和少样本学习】之三 [无标注数据] 的简单整理
  • 设计模式七大原则（五）迪米特法则
  • FPGA 中的 IOE与IO BANK
  • Windows环境Apache配置解析PHP，以及配置虚拟主机详解
  • springSecurity学习之springSecurity简介
  • Docker 笔记（2）：Dockerfile
  • ES6, React, Redux, Webpack写的一个爬 GitHub 的网页
  • JavaScript设计模式系列一：工厂模式
  • k个最大的数及变种小结
  • PHP的类修饰符与访问修饰符
  • PV统计优化设计
  • 汉诺塔算法
  • 后端_ThinkPHP5
  • 开发了一款写作软件(OSX,Windows)，附带Electron开发指南
  • 如何抓住下一波零售风口？看RPA玩转零售自动化
  • 双管齐下，VMware的容器新战略
  • 最简单的无缝轮播
  • 阿里云ACE认证学习知识点梳理
  • # 日期待t_最值得等的SUV奥迪Q9：空间比MPV还大，或搭4.0T，香
  • # 手柄编程_北通阿修罗3动手评：一款兼具功能、操控性的电竞手柄
  • # 透过事物看本质的能力怎么培养？
  • # 职场生活之道：善于团结
  • $.type 怎么精确判断对象类型的 --（源码学习2）
  • （3）选择元素——（17）练习（Exercises）
  • (cos^2 X）的定积分,求积分 ∫sin^2(x) dx
  • （C语言）逆序输出字符串
  • (delphi11最新学习资料) Object Pascal 学习笔记---第7章第3节（封装和窗体）
  • （二）延时任务篇——通过redis的key监听，实现延迟任务实战
  • (附源码)计算机毕业设计SSM智能化管理的仓库管理
  • （论文阅读11/100）Fast R-CNN
  • （转载）VS2010/MFC编程入门之三十四（菜单：VS2010菜单资源详解）
  • (自用)交互协议设计——protobuf序列化
  • **登录+JWT+异常处理+拦截器+ThreadLocal-开发思想与代码实现**
  • .NET Core 发展历程和版本迭代
  • .Net MVC4 上传大文件，并保存表单
  • .Net Web窗口页属性
  • .NET构架之我见
  • .NET面试题(二)
  • .NET面试题解析(11)-SQL语言基础及数据库基本原理
  • .NET下的多线程编程—1-线程机制概述
  • .NET应用UI框架DevExpress XAF v24.1 - 可用性进一步增强
  • .net与java建立WebService再互相调用
  • .NET运行机制
  • .NET中GET与SET的用法
  • .vue文件怎么使用_我在项目中是这样配置Vue的