vue中使用vuex中的mapGetters

已于 2022-11-30 22:06:05 修改
阅读量387 收藏
点赞数
文章标签： 前端 vue
于 2022-11-30 21:28:20 首次发布
原文链接：https://blog.csdn.net/qq_40701490/article/details/88794555
版权
本文介绍了如何在Vue项目中安装和使用Vuex。首先，根据Vue的版本选择合适版本的Vuex，通过npm进行安装或升级。接着，创建并组织store文件结构，包括summary.js、getters.js和index.js。然后，在main.js中引入store。最后，展示了如何将数据存储到store中以及如何在组件中引入和使用这些数据。
摘要由CSDN通过智能技术生成

一：在使用vuex之前需要安装vuex

1.查看自己的vue版本
查看方法:进入到package.json,然后ctrl+F输入vue,我使用的是vue@2.版本的，就需要使用vuex@3
如果使用的是vue@3，最好使用vuex@4版本
在这里插入图片描述
2.执行npm install vuex@3,如果需要替换vuex的版本，先卸载，执行 npm uninstall vuex

二：定义store

我的目录是这样的,创建好目录
在这里插入图片描述

summary.js
在这里插入图片描述

getters.js
在这里插入图片描述
index.js
在这里插入图片描述

三：在main.js中引入store 在这里插入图片描述

四.将数据保存在store中

![在这里插入图片描述](https://img-blog.csdnimg.cn/461ba939ff354c7faeb2d793eb4b28bd.png#pic_center

五.引入保存在store中的数据

在这里插入图片描述

1.导入
在这里插入图片描述
2.使用
在这里插入图片描述

葱油蛋饼
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Electron-vue实战（三）— 如何在Vuex中管理Mock数据
sueRimn的博客
06-25 271
Electron-vue实战(三)— 如何在Vuex中管理Mock数据 作者：狐狸家的鱼 本文链接：Vuex管理Mock数据 GitHub：sueRimn 在vuex中管理mock数据 关于vuex的简单理解在这篇文章中已经提过了，如何在vuex中管理mock数据呢。 这是效果界面，所用的数据是mock模拟所得，使用vuex的store存储管理模拟数据。 ...
vuex中使用对象展开运算符的示例
08-29
Vuex 中使用对象展开运算符的示例 Vuex 中使用对象展开运算符的示例是指在 Vuex 框架中使用对象展开运算符来简化代码和提高开发效率的技术。对象展开运算符是 ES6 中引入的一种语法，允许我们使用简洁的方式来合并...
详细分析Vuex中的mapGetters
最新发布
码农研究僧的博客
04-04 3960
用 mapGetters 和 mapState，可以简化组件中对于 Vuex 中状态和 getter 的映射工作，减少了重复的代码书写
vuex中mapGetters的使用及简单实现原理
热门推荐
叶修
03-25 6万+
一.项目中mapGetters 在Vue项目的开发过程中必然会使用到vuex，对vue项目公用数据进行管理，从而解决组件之间数据相互通信的问题，如果不使用vuex，那么一些非父子组件之间的数据通信将会变得极为繁琐。 1.这里首先说下项目中mapGetters的使用 先看下store部分目录结构 index.js文件 在这里插入代码片 ...
vue中mapGetters和...mapGetters
dianchanhe0596的博客
07-18 1792
　　 vuex中的...mapGetters(['name'])如何实现的 vuex vue.js 根据文档介绍https://vuex.vuejs.org/zh-cn/...和看了http://www.imooc.com/article/... export default { computed: { ....
vue mapState,mapMutations,mapGetters
spfLinux的博客
02-12 1298
main.js// The Vue build version to load with the `import` command // (runtime-only or standalone) has been set in webpack.base.conf with an alias. import Vue from 'vue' import store from './store' imp...
vuex的使用之mapGetters
weixin_44794123的博客
05-10 1万+
vue项目中，经常会使用到vuex，vuex是vue的一个状态管理。 本文简单总结一下：vuex中mapGetters的使用。 如果一个变量或对象需要在多个页面和组件中使用，那么，可以使用mapGetters。 一.vuex中声明变量个方法 1.在state中声明： state: { freeShipping:cookie.get('freeShipping'), } 2.在mutations中书写方法： mutations: { updatefreeShipping(state, fre
vue2.0的vuex状态管理详细教程
10-29
- 使用 Store：在组件中通过 `this.$store` 访问 store，使用 `mapState`、`mapMutations`、`mapActions` 和 `mapGetters` 辅助函数简化绑定。 3. 状态持久化 - 可以使用第三方库如 vuex-persistedstate 或 vuex-...
Vuex 在Vue 组件中获得Vuex 状态state的方法
12-02
当在Vue实例中使用Vuex时，可以通过`this.$store`访问store实例，无需在每个组件中导入store。例如： ```javascript const Counter = { template: `<div>{{ counter }}</div>`, computed: { count() { return...
Git操作 Vue基本使用 Vue组件化 Vuex使用
12-03
通过`store`实例创建状态管理器，然后在组件中使用`mapState`、`mapActions`、`mapGetters`等辅助函数来便捷地获取和操作状态。当多个组件需要共享同一状态时，Vuex可以避免数据传递的复杂性，提高代码的可维护性...
Vue (17) — getters的使用、四个map方法的使用(mapState方法、mapGetter方法、mapActions方法、mapMutations方法)
m0_59897687的博客
01-02 1464
目录 一、getters的使用 1.概念 2.在store.js中追加getters配置 3.组件中读取数据 二、四个map方法的使用 1.mapState方法 2.mapGetter方法 3.mapActions方法 4.mapMutations方法 一、getters的使用 1.概念 当 state 中的数据需要经过加工后再使用时，可以使用 getters 加工 2.在store.js中追加getters配置 .........
vue在使用vuex时遇到...mapGetter不能使用解决方案
qq_38761664的博客
05-16 2337
这是由于少了一个解析器，可以通过下载安装 npm instakk --save-dev label-plugin-transform-object-rest-spread 完成后再项目目录.babelrc中放入下面内容： {  "presets":[ ["es2015",{modules":false}]     ],     "plugin":["transform-object-
vue3.0中对mapState,mapGetters封装
weixin_45389051的博客
07-10 5955
看例子，如果没封装，当我们获取state的时候需要这样一个个写 const sCounter = computed(() => store.state.counter) const sName = computed(() => store.state.name) const sAge = computed(() => store.state.age) 封装之后这样写 const storeState = useState(["counter", "name", "age"])
Vue/Vuex (getters) 派生状态计算属性 理解和使用方法、辅助函数mapGetters
m0_64494670的博客
11-13 838
Vue/Vuex (getters) 派生状态计算属性 理解和使用方法、辅助函数mapGetters
vuex 辅助函数mapGetters基本用法
weixin_48927323的博客
07-26 1万+
vuex 辅助函数mapGetters基本用法
【Vue框架】Vuex状态管理详解与getters、mutations、actions使用以及四大辅助函数mapState、mapGetters、mapMutations、mapActions详解
量化Mike
04-10 2126
mapMutations辅助函数的作用是把store中mutation内的方法映射到组件methods属性中，可以在组件中直接使用mutation里面的方法。原理：actions中的方法并不能直接修操作state中的数据，需要触发mutations中的方法，最终还需要通过mutations中的方法修改数据。mapActions辅助函数的作用是把store中actions内的方法映射到组件methods属性中，可以在组件中直接使用actions里面的方法。vuex里面的属性所有组件都可以直接调用。
vuex详解一：彻底弄懂state、mapState、mapGetters、mapMutations、mapActions
冰冰酱
03-24 3344
vuex的使用
Vuex的使用（五）——mapGetters的定义和用法
讨厌走开啦
09-08 5830
参考文档：https://vuex.vuejs.org/zh/guide/ 当需要在组件中使用多个getters时，可以利用mapGetters批量生成计算属性（新增文件路径为src\components\componentE.vue），代码如下： mapGetters用法 getters in vuex：{{param2}} 引用上面创建的component-e查看效果（修改文件路径为src\main.js），代码如下： imp
vue3.2 中vuex使用方法
08-23
在 Vue 3.2 中使用 Vuex，你需要先安装 Vuex。你可以使用以下命令来安装它： ``` npm install vuex@next ``` 安装完成后，在你的应用程序入口文件中，一般是 `main.js`，导入并使用 Vuex： ```javascript import { createApp } from 'vue' import { createStore } from 'vuex' import App from './App.vue' const store = createStore({ state() { return { // 状态 } }, mutations: { // 改变状态的方法 }, actions: { // 异步操作的方法 }, getters: { // 计算属性 } }) const app = createApp(App) app.use(store) app.mount('#app') ``` 在这个例子中，我们创建了一个包含 `state`、`mutations`、`actions` 和 `getters` 的 Vuex store。你需要根据你的应用程序需求来定义这些部分。 在组件中使用 Vuex，你可以使用 `mapState`、`mapMutations`、`mapActions` 和 `mapGetters` 辅助函数，或者直接使用 `store` 实例。 例如，使用 `mapState` 辅助函数来映射 store 中的状态到组件的计算属性： ```javascript import { mapState } from 'vuex' export default { computed: { ...mapState(['counter']) } } ``` 这样就可以在组件中使用 `this.counter` 来访问 `counter` 状态。 这只是一个简单的示例，Vuex 还有更多的功能和用法。你可以参考 Vuex 的官方文档来了解更多详情：https://next.vuex.vuejs.org/
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值