Vue学习笔记-Vuex中getters的使用

已于 2023-12-08 16:43:08 修改
阅读量193 收藏
点赞数
分类专栏： Vue 文章标签： vue.js 学习 笔记
于 2023-11-28 10:44:19 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/theLuckyLong/article/details/134661995
版权

概念

当Vuex中state里的数据需要加工后再使用,并且希望复用时，可以使用getters加工

配置

在/store/index.js中追加getters配置

......
const state = {
	...
	sum:3,
	...
}
//这里的getter用法类似于vue中的计算属性，getters中的方法参数天生可以获取state对象
const getters = {
	bigSum(state){
		return state.sum * 10
	}
}

组件中读取getters中的数据

$store.getters.bigSum
theLuckyLong
关注
专栏目录
Vue学习笔记 —— Vuex之Getters
weixin_43340295的博客
11-24 190
前言 Getters只有当数据发生改变时才会重新倍计算（类似于计算属性）。 示例 需求：1、获取uers年龄（age）大于18岁的数据 state: { user: [ {name: 'a', age: 18, id: 1}, {name: 's', age: 17, id: 2}, {name: 'd', age: 19, id: 3} ] }, getters: { getUserAgeMore18: state => { return state.user.filter(s
Vue全家桶--Vuex学习笔记
qq_37396088的博客
01-31 345
vuex学习 终于学完了vue vue-loader vuex三件套！vuex学习完了记录笔记如下，是看的b站上的vue入门到实战和对比着官方文档学习的 vuex安装 npm install -S vuex store.js import Vuex from ‘vuex’ import Vue from ‘vue’ Vue.use(Vuex) const store = new Vues.store({ state:{}, mutations:{}, actions:{} }) export default
Vue学习笔记-vuex的基本使用
qq_54152856的博客
02-21 207
## Vuex 1、概念 在vue中实现集中式状态（数据）管理一个Vue的插件，对vue应用中多个组件的共享状态进行集中式管理(读/写)，也是一种组件间通信方式，且适用于任意组件间通信 2、搭建vuex环境 1、创建文件：src/store/index.js // 该文件用于创建vuex中最为核心的store import Vue from 'vue' ...
vuex中getters的参数
草宝虫的博客
10-14 1070
vuex中getters的参数详解
Vue学习笔记-Vuex四个map方法的使用
theLuckyLong的博客
11-28 226
是ES6语法，表示将该的对象所有属性展开，放入其所在上级对象中。配置完毕之后，当组件访问state中的数据，可以由原来的。配置完毕后，当组件访问getters中的数据，可以由。帮助我们生成与mutations对话的方法，即包含。帮助我们生成与actions对话的方法，即包含。
vue学习笔记-vuex
a8845的博客
02-23 312
store  仓库部分数据存储 Statestate 可以显示的展示数据格式等等，形象理解就是为数据占位置。思考：在什么位置可以 显示的生成数据，除state内以外？获取数据 Getters getters 写入获取数据的方法，vuex提供了 filter，find等筛选数据的方法状态变更 MutationMutation 可以更改 state里面的数据状态，必须是同步，异步不支持，通过store...
学习笔记-Vuex
最新发布
LearnTech_123的博客
07-31 1242
state 是一个对象，用来存放所有组件的共用的数据
Vue学习笔记-vuex
MZ-Coder的博客
08-03 184
一、vuex概述 1、组件之间共享数据的方式 父向子传值：v-bind属性绑定 子向父传值：v-on事件绑定 兄弟组件之间共享数据：EventBud $on：接收数据的组件 $emit：发送数据的组件 2、vuex是什么？ vuex是实现组件全局状态（数据）管理的机制，可以方便的实现组件之间数据的共享。 3、使用vuex统一管理状态的好处 能够在vuex中集中管理共享数据，易于开发和后期维护 能够高效地实现组件之间的数据共享，提高开发效率 存储在vuex中的数据都是响应式的，能够实时保持数据与页面同
vue学习笔记，学习vue从0-1的步骤
09-21
在学习Vue的过程中，通常会涉及以下几个核心概念和工具： 1. **Vue.js 基础**：Vue的核心在于其响应式系统，它允许开发者通过`data`属性定义数据，并自动更新与这些数据相关的DOM元素。此外，Vue使用模板语法，使...
Vuex源码学习笔记 - Vuex开发运行流程（二）
小帅的编程笔记
11-20 941
在上一篇笔记中：Vuex源码学习笔记（一） 我们从Github上找到了Vuex的源码，并clone了到本地，接着大致了解了每个文件夹的所存放的代码的作用，Vuex项目的架构也十分的整洁清晰，一目了然。最后我们使用npm run dev命令运行起了Vuex的项目。 今天我们将从npm run dev命令开始，来探究Vuex的开发的流程 注意：我们需要切换到4.0分支，本期主要分析Vuex4源码，也就是Vue3配套使用的Vuex。 首先我们可以从package.json文件看到： "scripts": {
Vue学习笔记 —— Vuex之Models（模块化管理模式）
weixin_43340295的博客
11-23 2791
Models（模块化管理模式） Vuex的模块化管理模式即是，将store 分割成若干个模块（module）。其中每个模块拥有自己的 state、mutation、action、getter。 配置 // store/index.js models:{ a:{ state:{}, mutation{} getters:{}, .... } } 调用（models中的state） this.$store.state.a
Vue学习笔记-路由的基本使用
theLuckyLong的博客
11-30 1416
实现组件切换，在App.vue中编写如下内容(active-class类用于动态地为选中的标签添加样式)在src路径下创建router文件夹，并创建index.js文件，该文件用于配置路由规则。在main.js中导入vue-router模块，并且使用vue-router插件。vue2 要下载vue-router3。vue3 要下载vue-router4。指定展示切换的组件的位置。
Vue学习--插槽slot 自定义事件内容分发
theLuckyLong的博客
03-31 552
什么是插槽 在Vue.js中，使用<slot>元素，作为承载内容分发的出口`。即，在模板中开一个口，用于拼接其他模板。 案例 <!DOCTYPE html> <html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"> <title>Slot</title> <script s
Vue学习笔记-配置代理服务器（用于解决跨域问题）
theLuckyLong的博客
11-16 455
跨域问题指的是在 Web 应用程序中，由于同源策略的限制，导致浏览器无法发送跨域请求，也无法获取跨域响应的问题。同源策略是浏览器的一种安全策略，它要求 Web 应用程序只能访问与当前页面具有相同协议、主机名和端口号的资源。如果不同源的 Web 应用程序需要通信，就需要进行跨域请求。但由于同源策略的限制，浏览器不允许跨域请求。在此情况下，如果前端需要访问其他域名下的资源，就会出现跨域问题。为解决跨域问题，可以由前端（或者后端）来进行相应配置。这里来介绍前端Vue项目配置代理服务器来解决跨域问题的方法。
Vue学习笔记-Vue3中ref和reactive函数的使用
theLuckyLong的博客
12-07 451
为了让vue3中的数据变成响应式，需要使用ref函数。
Vue学习笔记-Vue3中的shallowReactive和shallowRef
theLuckyLong的博客
12-14 406
reactive。
Vue学习笔记-搭建Vuex
theLuckyLong的博客
11-24 362
在Vue实现集中式状态（数据）管理的一个插件，对Vue中多个组件的共享状态进行集中式的管理（读/写），也是一种组件间的通信方式，适用于任意组件间的通信。多个组件需要共享数据时。
Vue学习笔记-activated和deactivated生命周期
theLuckyLong的博客
12-05 322
定义一个NewsVue组件，要求：当该组件出现时，部分字体的透明度周期性变化，当该组件被切换走时，需要被缓存，但需要注销其定时器。所独有的2个生命周期。
@vue/cli-plugin-vuex如何在页面引入vuex
05-21
@vue/cli-plugin-vuex是一个Vue CLI插件，用于在Vue项目中集成Vuex，从而实现状态管理。要在页面中引入Vuex，需要按照以下步骤进行操作： 1. 安装@vue/cli-plugin-vuex插件： ``` npm install -D @vue/cli-plugin-vuex ``` 2. 使用Vue CLI创建一个新的项目，选择安装@vue/cli-plugin-vuex插件： ``` vue create my-project ``` 3. 在Vue项目中创建store.js文件，用于定义Vuex的store： ``` import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) export default new Vuex.Store({ state: { count: 0 }, mutations: { increment (state) { state.count++ } }, actions: { incrementAsync ({ commit }) { setTimeout(() => { commit('increment') }, 1000) } }, getters: { getCount: state => state.count } }) ``` 4. 在main.js文件中引入store.js，并将store挂载到Vue实例上： ``` import Vue from 'vue' import App from './App.vue' import store from './store' new Vue({ store, render: h => h(App), }).$mount('#app') ``` 5. 在组件中使用Vuex的state、mutations、actions、getters等方法： ``` <template> <div> <p>Count: {{ count }}</p> <button @click="increment">Increment</button> </div> </template> <script> export default { computed: { count () { return this.$store.getters.getCount } }, methods: { increment () { this.$store.dispatch('incrementAsync') } } } </script> ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值