VUE笔记（九）vuex

一、vuex的简介

1、回顾组件之间的通讯

父组件向子组件通讯：通过props实现

子组件向父组件通讯：通过自定义事件($emit)方式来实现

兄弟组件之间的通讯：事件总线（$eventBus）、订阅与发布方式来实现

跨级组件的通讯：可以通过(provider和inject)方式来实现

2、什么是Vuex

3、使用vuex的好处

  • 集中管理共享数据

  • 高效实现组件之间数据共享

  • vuex中的数据都是响应式的，能够实施保持数据与页面的同步

4、vuex和localStorage的区别

  • vuex是存储在内存中，localStroage存储数据在浏览器本地存储的

  • vuex的数据是瞬时的，localStroage是持久的，是不容易丢失的

  • vuex的数据是响应式的，localStorage中的数据不是响应式的

  • vuex还能完成异步操作(网络请求的)，localStorage仅仅只是一个保存数据和获取数据

  • vuex中数据按照业务进行模块化，localStorage管理数据没有模块化

  • vuex直接操作JS的对象无需转换，localStorage存储数据要转成JSON，取数据要将JSON转成JS对象

  • 单页面应用的程序组件数据共享使用使用状态机(vuex),localStorage适合多【页面数据的共享

5、什么情况下我应该使用 Vuex?

Vuex 可以帮助我们管理共享状态，并附带了更多的概念和框架。这需要对短期和长期效益进行权衡。 如果您不打算开发大型单页应用，使用 Vuex 可能是繁项几余的。确实是如此一一如果您的应用够简单，您最好不要使用 Vuex，一个简单的 store 模式就足够您所需了。但是，如果您需要构建一个中大型单页应用，您很可能会考虑如何更好地在组件外部管理状态，Vuex 将会成为自然而然的选择，引用 Redux的作者 Dan Abramov 的话说就是:

Flux 架构就像眼镜: 您自会知道什么时候需要它

6、vuex的安装和基本配置

  • 下载vuex的依赖包

npm i vuex@3.6.2

  • 在src目录下创建一个store文件夹

  • 在src/store/index.js在此处完成vuex状态机仓库的基本配置

import Vue from 'vue'
import Vuex from 'vuex'
//将vuex以插件的方式设置到Vue中
Vue.use(Vuex)
/*创建仓库new Vuex.Store(参数)参数是状态机配置对象,状态机由5大部件组成state:用来管理vuex仓库（store)中的状态,它是一个对象mutation:用来操作state的选项，改变数据,它是一个对象actions:异步操作的getters:相当于是状态机中的计算属性modules:模块化
*/
const store=new Vuex.Store({state:{num:10},mutations:{}
})
//导出store
export default store

  • 挂载store到vue中

import Vue from 'vue'
import App from './App.vue'
import store from '@/store'
Vue.config.productionTip = false
​
new Vue({render: h => h(App),store
}).$mount('#app')

二、vuex的基本使用和原理

1、Store核心概念

  • state:用来存储状态的

  • Mutatations:State的数据只能通过Mutations才能改变

  • Actions:用来完成异步操作，比如从后端获取数据

2、vuex的原理

Vuex的执行的流程

  • VueComponents(Vue组件)通过执行dispatch向store对象的Actions发送命令，要求完成异步任务

  • Actions执行异步任务，比如向Backend API(后端)发送请求，从后端获取到结果

  • Actions通过执行commit要求Mutations更改State状态机的数据，Mutatations就开始执行这个操作

  • Vue Componetents(Vue组件)直接从仓库中获取数据

注意点：

  • 如果不执行异步任务，组件可以直接操作Mutatation来完成仓库中数据的改变

3、vuex的基本操作

这里以计数器的方式来讲解这个案例

3.1、state

  • 首先先在store/index.js的state部分定义状态机状态数据

const store=new Vuex.Store({state:{num:10}
})

  • 在组件中获取这个状态数据

组件中如果要获取store中的state数据的语法

如果要在js代码部分获取

this.$store.state.数据名

如果要在template部分获取

{{$store.state.数据名}}
或者
<div v-bind:属性="$store.state.数据名"></div>
3.2、mutations

组件中操作状态机的数据

如果组件内要更改状态机的数据，如果是通过的话，直接通过Mutations的方式去操作

  • 在store对象配置对象中添加mutations选项，并定义要操作的方法

const store=new Vuex.Store({state:{num:10},mutations:{INCREMENT(state,payload){state.num++}}
})

参数说明

1) 参数1：state对象

2) 参数2：载荷数据，此数据来源于组件或者actions

  • 组件中操作state的数据

this.$store.commit(方法名，传递的参数)
export default {methods:{increment(){this.$store.commit('INCREMENT')}}
}

  • 如果组件需要给仓库中传递数据，可以通过载荷传值

const store=new Vuex.Store({state:{num:10},mutations:{INCREMENT_N(state,payload){state.num+=payload}}
})
export default {methods:{incrementN(n){this.$store.commit('INCREMENT_N',3)}}
}
3.3、actions

组件中要调用store仓库中的actions的语法

this.$store.dispatch('actions的相关方法名'，参数)

购物车案例

  • 组件

<template><div><h2>购物车列表</h2>{{$store.state.shopcartList}}<table><thead><tr><td>ID</td><td>名称</td><td>数量</td><td>价格</td><td>小计</td></tr></thead><tbody><tr v-for="(item,index) in $store.state.shopcartList" :key="item._id"><td>{{index+1}}</td><td>{{item.name}}</td><td>{{item.num}}</td><td>{{item.price}}</td><td>{{item.num*item.price}}</td></tr></tbody></table></div>
</template><script>
export default {methods:{getShopcartList(){//调用store仓库中的actions，让其执行异步操作this.$store.dispatch('getShopcartList_Async')}  },created(){this.getShopcartList()}
}
</script><style></style>

  • store

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store=new Vuex.Store({state:{shopcartList:[]},mutations:{getShopcartList_Sync(state,payload){console.log('------2、store中的mutations的getShopcartList_Sync--------------');console.log('payload',payload);state.shopcartList=payload}},//完成异步操作actions:{async getShopcartList_Async(context){console.log('------1、store中的actions的getShopcartListAsync--------------');let result=await Vue.prototype.$api.shopcart.getShopcartData()console.log(result.data);console.log('context',context);context.commit('getShopcartList_Sync',result.data)}}
})
//导出store
export default store
3.4、getters

getters选项中专门是依赖于state数据，产生新的数据，就相当于组件中计算属性

语法

const store=new Vuex.Store({getters:{getter方法名称(state){return 处理后的数据}}
})

在组件中调用的语法

this.$store.getters.getter方法名称

案例：使用getters完成总价计算

const store=new Vuex.Store({getters:{totalPrice:state=>state.shopcartList.filter(item=>item.checked).reduce((prev,cur)=>prev+cur.price*cur.num,0)}
})

组件中方法问

总价：{{$store.getters.totalPrice}}

三、辅助函数

之前我们如果要在组件中访问状态机仓库中的数据，或者操作状态机仓库的数据，必须通过this.$store这个对象来完成，除了这种方式之外，vuex为我们提供了另外一种组件中访问或者操作store的方式，这种方式就是辅助函数

辅助函数最重要的思想是将状态机中的数据或者方法映射成组件内方法

vuex中提供了以下四种常用方法

  • mapState():这个方法就是将状态机仓库中的state数据映射成组件内数据

  • mapMutatations():将状态机仓库中mutations选项中方法映射组件的方法

  • mapActions():将状态机仓库中actions选项中的方法映射成组件的方法

  • mapGetters()：将状态机仓库中getters选项中的方法映射成组件内的计算属性

1、mapActions的使用

  • 导入mapActoins

import {mapActions} from 'vuex'

  • 在methods选项中使用扩展运算符来映射仓库中的actions选项的方法到组件中

export default{methods:{...mapActions(["仓库中actions选项中的对应的方法名"])}
}

  • 直接调用

export default{methods:{...mapActions(["getShopcartList_Async"]),getShopcartList(){this.getShopcartList_Async()}}
}

2、mapState的使用

  • 导入mapState

import {mapState} from 'vuex'

  • 必须在计算属性中使用扩展运算符来进行映射

语法

computed:{...mapState(['state中的属性名'])
}

案例

export default {computed:{...mapState(["shopcartList"])}
}

  • 组件中直接使用

{{shopcartList}}

3、mapMutations

  • 导入mapMutations

import {mapMutations} from 'vuex'

  • 必须在methods中使用扩展运算符的方式将其映射成组件中相关方法

export default {methods:{...mapMutations(["increment_Sync"]),increment(){this.increment_Sync()}}
}

4、mapGetters

  • 导入mapGetters

import {mapGetters} from 'vuex'

  • 在computed选项中使用扩展运算符将其映射

export default {computed:{...mapGetters(["totalPrice"])},
}

5、别名

如果你映射仓库中的名字正好和你的组件内的名子冲突了怎么办

export default{methods:{...mapMutations({"新名称1":"仓库中名称"}),...mapActions({"新名称1":"仓库中名称"})},compouted:{...mapState({"新名称1":"仓库中名称"}),...mapGetters({"新名称1":"仓库中名称"})}
}

总结：actions和mutations是在methods选项中映射的，state和getters是在computed选项中映射的。

四、vuex的模块化

随着项目的规模越来越大，状态机的功能越来越多的时候，我们仅仅将所有的功能写在store/index.js中，这样会带来如下的麻烦

  • 业务结构不够清晰

  • 可读性很差

  • 可维护性很差

1、模块的实现步骤

  • 在src/store文件夹下创建modules文件夹

  • 在modules文件下创建shopcart.js，内容如下

    特别注意：如果要模块化，必须要在该对象中设置namespaced:true

export default {namespaced:true,state: {shopcartList: []},mutations: {getShopcartList_Sync(state, payload) {console.log('------2、store中的mutations的getShopcartList_Sync--------------');console.log('payload', payload);state.shopcartList = payload}},actions: {async getShopcartList_Async(context) {console.log('------1、store中的actions的getShopcartListAsync--------------');let result = await Vue.prototype.$api.shopcart.getShopcartData()context.commit('getShopcartList_Sync', result.data)},async checkedProduct_Async(context, payload) {console.log('------1、store中的actions的checkedProduct_Async--------------', payload);let result = await Vue.prototype.$api.shopcart.checkProducts(payload)if (result.code) {//在actions中方法调用actions中的方法context.dispatch('getShopcartList_Async')}},async changeNum_Async(context, payload) {console.log('------1、store中的actions的changeNum_Async--------------', payload);let result = await Vue.prototype.$api.shopcart.changeNum(payload)if (result.code) {context.dispatch('getShopcartList_Async')}}},getters: {totalPrice: state => state.shopcartList.filter(item => item.checked).reduce((prev, cur) => prev + cur.price * cur.num, 0)}
}

  • 在store/index文件中引入该模块

import Vue from 'vue'
import Vuex from 'vuex'
import shopcart from './modules/shopcart'
import counter from './modules/counter'
Vue.use(Vuex)
const store=new Vuex.Store({state:{},mutations:{},actions:{},getters:{},modules:{a:shopcart,b:counter}})
//导出store
export default store

  • 在组件中引用

    • 原生方式引入

    调用actions的方法

    this.$store.dispatch("模块名/actions的相关方法名")

    调用getters

    {{$store.getters['模块名/getters的相关名称']}}

    调用state

    {{$store.state.模块名.数据名}}

    调用mutations

     this.$store.commit('模块名/mutations的相关方法名')

    2、辅助函数访问模块化

辅助函数访问模块化的vuex的步骤

  • 导入createNamespacedHelpers

import {createNamespacedHelpers} from 'vuex'

  • 通过createNamespacedHelpers()来获取辅助函数

const {mapActions,mapState,mapGetters}=createNamespacedHelpers('模块名')

注意：如果在一个组件中要映射多个模块的辅助函数，就需要为每个模块的辅助函数取别名，解决命名冲突

const {mapActions:别名,mapState:别名,mapGetters:别名}=createNamespacedHelpers(模块名)

  • 在computed或者methods选项中通过扩展运算符实现映射

  methods:{...mapShopcartActions(["getShopcartList_Async"]),...mapCounterMutations(["increment_Sync"]),},computed:{...mapShopcartState(["shopcartList"]),...mapShopcartGetters(["totalPrice"]),...mapCounterState(["num"])}

五、vuex的持久化

vuex中的数据，一旦页面刷新之后会丢失？怎么处理？【回答】

由于vuex状态机中的数据是瞬时的， 保存在内存中的，所以页面刷新后，数据会丢失，如果要解决这个问题，需要将状态机中的数据进行持久化

不是所有的状态机的数据都需要持久化的

持久化的思路：持久化就是将vuex状态机中的数据保存在localStorage中存一份

1、使用vuex-persistedstate插件来实现vuex持久化

使用的步骤如下所示

  • 安装vuex-persistedstate依赖包

npm i vuex-persistedstate

  • 在src/store/index.js中导入vue-persistedstate

import createPersistedstate from 'vuex-persistedstate'

  • 在src/store/index.js在仓库入口文件中配置插件

const store=new Vuex.Store({//....省略plugins:[createPersistedstate({//存在localstorage中的名字key:'store-num-key',//模块名.数据名paths:['b.num']})]
})

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

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

相关文章

word如何调整页码

word如何调整页码

文章目录 如何调整页码 如何调整页码 用 word 写报告的时候&#xff0c;经常遇到要求说是要从正文开始才显示页码&#xff0c;那如何实现呢 把鼠标放在我们正文的那一页的顶部&#xff0c;点击 布局 ,再点击分隔符&#xff0c;再点击连续 再点击编译页脚 选择你想要的页脚格式…
阅读更多...
MySQL数据库基本操作

MySQL数据库基本操作

目录 一、数据库中常用的数据类型 二、常用命令与操作 1.DDL数据库定义语言 1、登录用户的数据库 2、查看当前服务器中的数据库 3、切换/进入数据库 并 查看数据库中包含的表 4、查看数据库中表的结构 5、创建数据库 7、展示创建数据表时的结构 8、创建表&#xff0c…
阅读更多...
UML建模以及几种类图的理解

UML建模以及几种类图的理解

文章目录 前言1.用例与用例图1.1 参与者1.2 用例之间的关系1.3 用例图1.4 用例的描述 2.交互图2.1 顺序图2.2 协作图 3.类图和对象图3.1 关联关系3.2 聚合和组合3.3 泛化关系3.4 依赖关系 4.状态图与活动图4.1 状态图4.2 活动图 5.构件图 前言 UML通过图形化的表示机制从多个侧…
阅读更多...
大语言模型之六- LLM之企业私有化部署

大语言模型之六- LLM之企业私有化部署

数据安全是每个公司不得不慎重对待的&#xff0c;为了提高生产力&#xff0c;降本增效又不得不接受新技术带来的工具&#xff0c;私有化部署对于公司还是非常有吸引力的。大语言模型这一工具结合公司的数据可以大大提高公司生产率。 私有化LLM需要处理的问题 企业内私有化LLM…
阅读更多...
langchain ChatGPT AI私有知识库

langchain ChatGPT AI私有知识库

企业知识库 原理就是把文档变为向量数据库&#xff0c;然后搜索向量数据库&#xff0c;把相似的数据和问题作为prompt&#xff0c; 输入到大模型&#xff0c;再利用GPT强大的自然语言处理、推理和分析等方面的能力将答案返回给用户 什么是langchain? langchain是一个强大的…
阅读更多...
VScode代码自动补全提示

VScode代码自动补全提示

VScode代码自动补全提示 打开设置 搜索 Suggest:Snippets Prevent Quick Suggestions &#xff0c;去掉勾选 CtrlShiftP打开setting.json文件&#xff0c;添加以下代码 "editor.suggest.snippetsPreventQuickSuggestions": false,"editor.quickSuggestions…
阅读更多...
机器学习概述

机器学习概述

文章目录 机器学习应用背景数据挖掘个性化定制替代人力的软件应用 什么是机器学习示例 机器学习系统举例IBM Watson DeepQAIBM Watson技术需求相关技术 -- DeepQA 通用机器学习系统设计设计一个学习系统 1系统设计1 —— 用于训练的经验 设计学习系统 2系统设计2 —— 到底应该…
阅读更多...
Spring Boot多环境指定yml或者properties

Spring Boot多环境指定yml或者properties

Spring Boot多环境指定yml或者properties 文章目录 Spring Boot多环境指定yml或者properties加载顺序配置指定某个yml 加载顺序 ● application-local.properties ● application.properties ● application-local.yml ● application.yml application.propertes server.port…
阅读更多...
项目模块创建后修改SDK和jdk和版本

项目模块创建后修改SDK和jdk和版本

阅读更多...
Tcp 协议的接口测试

Tcp 协议的接口测试

首先明确 Tcp 的概念&#xff0c;针对 Tcp 协议进行接口测试&#xff0c;是指基于 Tcp 协议的上层协议比如 Http &#xff0c;串口&#xff0c;网口&#xff0c; Socket 等。这些协议与 Http 测试方法类似&#xff08;具体查看接口自动化测试章节&#xff09;&#xff0c;但在测…
阅读更多...
Nuxt.js--》添加路由、视图和过渡效果

Nuxt.js--》添加路由、视图和过渡效果

博主今天开设Nuxt.js专栏&#xff0c;带您深入探索 Nuxt.js 的精髓&#xff0c;学习如何利用其强大功能构建出色的前端应用程序。我们将探讨其核心特点、灵活的路由系统、优化技巧以及常见问题的解决方案。无论您是想了解 Nuxt.js 的基础知识&#xff0c;还是希望掌握进阶技巧&…
阅读更多...
根据源码，模拟实现 RabbitMQ - 网络通讯设计，自定义应用层协议，实现 BrokerServer (8)

根据源码，模拟实现 RabbitMQ - 网络通讯设计，自定义应用层协议，实现 BrokerServer (8)

目录 一、网络通讯协议设计 1.1、交互模型 1.2、自定义应用层协议 1.2.1、请求和响应格式约定 ​编辑 1.2.2、参数说明 1.2.3、具体例子 1.2.4、特殊栗子 1.3、实现 BrokerServer 1.3.1、属性和构造 1.3.2、启动 BrokerServer 1.3.3、停止 BrokerServer 1.3.4、处…
阅读更多...
Java小游戏

Java小游戏

一、需求 二、思路一 HP当然是怪物的一个属性成员&#xff0c;而武器是角色的一个属性成员&#xff0c;类型可以使字符串&#xff0c;用于描述目前角色所装备的武器。角色类有一个攻击方法&#xff0c;以被攻击怪物为参数&#xff0c;当实施一次攻击时&#xff0c;攻击方法被调…
阅读更多...
31、springboot 配置HTTP服务端口及如何通过WebServer实例动态获取项目中的HTTP端口

31、springboot 配置HTTP服务端口及如何通过WebServer实例动态获取项目中的HTTP端口

配置HTTP服务端口及如何通过WebServer实例动态获取项目中的HTTP端口 ★ 设置HTTP服务端口&#xff1a; - server.port或者SERVER_PORT环境变量——总结来说&#xff0c;其实就是要配置server.port外部配置属性。▲ 同样遵守如下优先级&#xff1a; 这些都是外部配置源&#x…
阅读更多...
Android——基本控件下（十七）

Android——基本控件下（十七）

1. 文本切换&#xff1a;TextSwitcher 1.1 知识点 &#xff08;1&#xff09;理解TextSwitcher和ViewFactory的使用。 1.2 具体内容 范例&#xff1a;切换显示当前时间 <LinearLayout xmlns:android"http://schemas.android.com/apk/res/android"xmlns:tools&…
阅读更多...
嵌入式设备应用开发（发现需求和提升价值）

嵌入式设备应用开发（发现需求和提升价值）

【 声明：版权所有，欢迎转载，请勿用于商业用途。 联系信箱：feixiaoxing @163.com】 很多做技术的同学，都会陷入到技术的窠臼之中。对于如何做具体的产品、实现具体的技术，他们可能很感兴趣。但是做出来的东西做什么用，或者说是有没有竞争力，事实上他们不是很关心…
阅读更多...
使用 Transformer 和 Amazon OpenSearch Service 构建基于列的语义搜索引擎

使用 Transformer 和 Amazon OpenSearch Service 构建基于列的语义搜索引擎

在数据湖中&#xff0c;对于数据清理和注释、架构匹配、数据发现和跨多个数据来源进行分析等许多操作&#xff0c;查找相似的列有着重要的应用。如果不能从多个不同的来源准确查找和分析数据&#xff0c;就会严重拉低效率&#xff0c;不论是数据科学家、医学研究人员、学者&…
阅读更多...
无涯教程-PHP - Filtered反序列化

无涯教程-PHP - Filtered反序列化

PHP 7引入了Filtered unserialize()函数&#xff0c;以在对不受信任的数据上的对象进行反序列化时提供更好的安全性。 <?phpclass MyClass1 { public $obj1prop; }class MyClass2 {public $obj2prop;}$obj1new MyClass1();$obj1->obj1prop1;$obj2new MyClass2();$obj…
阅读更多...
15.live555mediaserver-rtp打包

15.live555mediaserver-rtp打包

live555工程代码路径 live555工程在我的gitee下&#xff08;doc下有思维导图、drawio图&#xff09;&#xff1a; live555 https://gitee.com/lure_ai/live555/tree/master 章节目录链接 0.前言——章节目录链接与为何要写这个&#xff1f; https://blog.csdn.net/yhb1206/art…
阅读更多...
php插件Workerman聊天室示例

php插件Workerman聊天室示例

chat.php内容如下 <?php//使用workerman&#xff0c;只需引入这个文件require_once "workerman-4.0/Autoloader.php";//创建服务器&#xff0c;监听3000端口$wsServernew \Workerman\Worker("websocket://127.0.0.1:3000");$wsServer->onConnectfu…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023