【vue2第二十章】vuex使用 (state,mutations,actions,getters)

news2025/1/11 8:12:20
vuex是什么？

Vuex是一个用于Vue.js应用程序的状态管理模式。它允许您在应用程序中管理共享状态，并以可预测的方式进行状态更新。Vuex集成了Vue的响应式系统，使得状态的变化能够自动地更新视图。使用Vuex，您可以将应用程序的状态集中存储在一个地方，而不是分散在各个组件中。这样可以方便地跟踪、调试和管理应用程序中的状态，并且能够更好地处理复杂的应用程序逻辑和状态间的依赖关系。总之，Vuex可以帮助您更好地组织和管理Vue.js应用程序的状态。
用大白话来说就是，vuex是一个插件，可以帮助我们管理vue的通用数据(多组件共享数据)

使用vuex就是很多个组件都可以使用一份数据，也可以对这同一份数据进行维护，不需要再使用组件之间的通讯方式，每个组件直接访问vuex里面的数据。如下图：
在这里插入图片描述

构建vuex(多组件数据共享)环境。

在创建项目时没有选择vuex时，需要手动安装，如果已经勾选则可以直接使用。接下来是手动安装步骤。
在这里插入图片描述
主要分为四步(这里使用的时npm)：

  1. 在项目路径下打开终端输入 npm install vuex@3.6.2 --save在这里插入图片描述
  2. 在src目录下创建文件夹store，在其中创建index.js文件。

在这里插入图片描述

  1. 在index.js文件中引入vuex，创建仓库后导出。
import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

const store =new Vuex.Store();
export default store;
  1. 在main.js文件中直接导入，然后挂载
import Vue from 'vue'
import App from './App.vue'
import store from "@/store/index"

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
  store
}).$mount('#app')
vuex如何提供数据和访问数据（state）。
vuex提供数据 核心概念state

在这里插入图片描述
在创建仓库时，添加state对象，在state对象中添加数据。如下：

import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

const store =new Vuex.Store({
    state:{
        count:0,
        title:'大标题'
    }
});

export default store;
vuex访问数据（直接访问 和 使用mapState辅助函数）

访问数据也就是如何使用数据。
在这里插入图片描述
在标签中直接使用模板语法{{ $store.state.数据名称}}即可访问数据。
在js代码中，使用this.$store.state.count访问数据。

<template>
  <div id="app">
    <div>{{ $store.state.title }}</div>
    <p>{{ $store.state.count }}</p>    
  </div>
</template>

<script>
export default {
  name: 'App',
  created(){
    console.log(this.$store.state.count)
  }
}
</script>

以上方法每次使用数据都需要写一大串，所以vuex也提供了简便方法，通过辅助函数。
在这里插入图片描述
使用展开运算符的原因是，可以继续扩展组件需要的计算属性，不会因为一个mapState就把整个计算属性占满导致无法使用组件计算数据。

<template>
  <div>
   <!--3. 最后直接通过属性名使用数据 -->	
    <p>{{ title }}</p>
    <p>{{ count }}</p>
    <button @click="changecount">新增</button>
  </div>
</template>

<script>
//1.导入mapState辅助函数
import { mapState } from 'vuex';

export default {
  computed:{
  //2.使用数组方式引入state，使用展开运算符自动映射到计算属性中
    ...mapState(['count','title'])
  }
}
</script>
vuex修改数据

修改数据很多人就会想到，既然可以直接拿，那么肯定可以直接改吧，就如下代码，直接写一个方法，直接在组件中修改vuex中的数据。 但是这样写是不规范的。

<template>
  <div id="app">
    <div>{{ $store.state.title }}</div>
    <p>{{ $store.state.count }}</p>
    <button @click="changecount">新增</button>
  </div>
</template>

<script>
export default {
  name: 'App',
  methods:{
    changecount(){
    //直接在组件中对vuex中的值进行修改，错误写法。
      this.$store.state.count++
    }
  }
}
</script>

在这里插入图片描述
所以vuex提供了一个严格模式，只要在组件中进行修改vuex中的数据就会报错。

import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

const store =new Vuex.Store({
	//开启严格模式。
    strict:true,
    state:{
        count:0,
        title:'大标题'
    }
});
export default store;
核心概念mutations

那么不可以直接修改，vuex肯定是提供了可以修改的方法，就是mutations。
在这里插入图片描述
首先在仓库的index.js文件中新增一个mutations对象

import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

const store =new Vuex.Store({
    strict:true,
    state:{
        count:0,
        title:'大标题'
    },
    mutations:{
    	//修改数据的逻辑
        countadd(state,obj){
            console.log(obj)
            state.count = state.count + obj.num
        }
    }
});

export default store;

在组件中使用this.$store.commit('mutations中的方法名',参数)其中参数可以是对象，数据，基本数据类型等，但是只可以是一个，不可以传多个参数。

<template>
  <div>
    <p>{{ title }}</p>
    <p>{{ count }}</p>
    <button @click="changecount(1)">加1</button>
    <button @click="changecount(2)">加2</button>

  </div>
</template>

<script>
import { mapState } from 'vuex';

export default {
  computed:{
    ...mapState(['count','title'])
  },
  methods:{
    changecount(n){
      this.$store.commit('countadd',{
         num:n,
         text:"哈哈哈"
      })
    }
  }
}
</script>

成功修改效果：
在这里插入图片描述
其中mutations也有对应的辅助函数mapMutations。
在这里插入图片描述
其中

  methods:{
    changecount(num){
      this.$store.commit('countadd',num)
    }
  }

和

methods:{
    ...mapMutations(['countadd'])
  }

是对等的。

使用mapMutations需要先导入mapMutations。
后续则可直接通过映射的方法名来调用。

<template>
  <div>
    <p>{{ title }}</p>
    <p>{{ count }}</p>
    <!-- 直接使用映射的方法名来调用 -->
    <button @click="countadd(1)">加1</button>
    <button @click="countadd(2)">加2</button>

  </div>
</template>

<script>
//导入mapMutations
import { mapState,mapMutations } from 'vuex';

export default {
  computed:{
    ...mapState(['count','title'])
  },
  methods:{
  //映射方法 参数为数组，数组中的字符串为需要映射的方法名。
    ...mapMutations(['countadd'])
  }
}
</script>
核心概念actions

actions使用来处理一部操作的，为什么不使用mutations处理，因为mutations是同步的，因为mutations需要保准数据的精确性，所以使用actions来进行异步操作。
在这里插入图片描述
组件代码（使用actions时需要使用 this.$store.dispatch('方法名',参数)来提交数据）：

<template>
  <div>
    <p>{{ title }}</p>
    <p>{{ count }}</p>
    <button @click="changecount(1)">加1</button>
    <button @click="changecount(2)">加2</button>
    <button @click="actionschangecount(1)">一秒钟后加1</button>
    <button @click="actionschangecount(2)">一秒钟后加2</button>
  </div>
</template>

<script>
import { mapState } from 'vuex';

export default {
  computed:{
    ...mapState(['count','title'])
  },
  methods:{
    changecount(num){
      this.$store.commit('actionscountadd',num)
    },
    actionschangecount(num){
    //需要使用dispatch来提交数据
      this.$store.dispatch('actionscountadd',num)
    }
  }
}
</script>

index.js新增actions对象新增代码逻辑，这里是使用了一个定时器来模拟发送了请求，在正式使用时就可以改为调用后台接口：

import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

const store =new Vuex.Store({
    strict:true,
    state:{
        count:0,
        title:'大标题'
    },
    mutations:{
        countadd(state,num){
            state.count = state.count + num
        }
    },
    //新增actions对象
    actions:{
        actionscountadd(context,num){
        //在正式使用actions这里就可以改为调用后台接口获取数据
            setTimeout(()=>{
                context.commit ('countadd',num)
            },1000)
        }
    }
});

export default store;

辅助函数mapActions和mapMutations同理。
在这里插入图片描述
首先需要导入mapActionsimport { mapActions } from 'vuex';
再通过...mapActions(['actionscountadd'])映射方法到methods，
最后直接调用。

<template>
  <div>
    <p>{{ title }}</p>
    <p>{{ count }}</p>
    <button @click="changecount(1)">加1</button>
    <button @click="changecount(2)">加2</button>
    <button @click="actionscountadd(1)">一秒钟后加1</button>
    <button @click="actionscountadd(2)">一秒钟后加2</button>
  </div>
</template>

<script>
//导入mapActions 
import { mapState,mapActions } from 'vuex';

export default {
  computed:{
    ...mapState(['count','title'])
  },
  methods:{
  //使用mapActions映射需要使用的方法
    ...mapActions(['actionscountadd']),
    changecount(num){
      this.$store.commit('countadd',num)
    }
  }
}
</script>
核心概念getters

除了state之外，有时我们还需要从state中派生出一些状态，这些状态是依赖state的，此时会用到getters，其实getters就类似于计算属性，而state就类似于data数据，getters需要从已知的state状态中计算出新的getters属性。
在这里插入图片描述
比如以下代码我需要把state中的list中的数字为奇数的过滤掉。只要偶数：

import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

const store =new Vuex.Store({
    strict:true,
    state:{
        count:0,
        title:'大标题',
        list:[1,2,3,4,5,6,7,8,9,10]
    },
    //新增getters对象
    getters:{
        filterList(state){
        	//需要返回一个数据
            return state.list.filter(item => item % 2 == 0)
        }
    }
});
export default store;

通过import { mapState,mapGetters } from 'vuex'; 引入mapGetters ，使用filterList属性。

也可以直接通过模板语法{{ $store.getters.filterList }}使用getters属性

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

<script>
import { mapState,mapGetters } from 'vuex';

export default {
  computed:{
    ...mapState(['count','title']),
    ...mapGetters(['filterList'])
  }
}
</script>

效果图：
在这里插入图片描述

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

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

相关文章

华为云云耀云服务器L实例评测 ｜云服务器性能评测

华为云云耀云服务器L实例评测 ｜云服务器性能评测

通过上一篇文章华为云云耀云服务器 L 实例评测 &#xff5c;云服务器选购&#xff0c;我已经购买了一台 Centos 系统的云耀云服务器 L 实例。 在获得云耀云服务器 L 实例后&#xff0c;首要任务是熟悉云耀云服务器 L 实例的性能&#xff0c;对云耀云服务器 L 实例的性能进行测…
阅读更多...
如何在 SOLIDWORKS中创建零件模板 硕迪科技

如何在 SOLIDWORKS中创建零件模板 硕迪科技

作为一款多功能且可大量定制的 3D CAD 软件&#xff0c;SOLIDWORKS模板可以通过自定义属性包含大量数据。可以通过为SOLIDWORKS零件、装配体和工程图创建模板来利用这些模板。 与其他一些CAD软件不同&#xff0c;SOLIDWORKS不限制您可以创建的模板数量 - 您可以根据需要创建任…
阅读更多...
3、SpringBoot_配置文件

3、SpringBoot_配置文件

四、配置文件 1.前言 曾经使用SpringMVC的时候是手动修改tomcat配置的端口信息&#xff0c;那现在Springboot如何修改&#xff1f;springboot有一个默认的配置文件 application.properties 2.配置文件分类 常用配置信息官方文档地址 https://docs.spring.io/spring-boot/doc…
阅读更多...
web：[极客大挑战 2019]Knife

web：[极客大挑战 2019]Knife

题目 点开页面显示为&#xff0c;还有一句话木马 查看源代码&#xff0c;没有什么特别的 回归题目&#xff0c;页面显示使用菜刀和一句话木马&#xff0c;使用蚁剑连接 在根目录找到了flag文件
阅读更多...
记账APP：小哈记账5——记账首页页面的制作（2）

记账APP：小哈记账5——记账首页页面的制作（2）

项目介绍&#xff1a; 小哈记账是一款用于记账APP&#xff0c;基于Android Studio开发工具&#xff0c;采用Java语言进行开发&#xff0c;同时使用litepal和阿里云数据库进行数据的增删查改&#xff0c;以图标的形式在App的界面上显示。App可以清晰显示收支情况&#xff0c;并以…
阅读更多...
EfficientNet笔记

EfficientNet笔记

前言 论文 EfficientNet 是一系列卷积神经网络架构&#xff0c;它旨在在计算资源受限的情况下实现更好的性能。EfficientNet 的设计思想是在网络的深度、宽度和分辨率方面进行均衡的调整&#xff0c;以获得高效且高性能的模型。 以下是 EfficientNet 的主要特点和设计原则&a…
阅读更多...
VS2022创建控制台应用程序后没有Main了，如何显示Main？

VS2022创建控制台应用程序后没有Main了，如何显示Main？

文章目录 问题描述原因解决方案简单的顶级语句试用计算器 其他文章 问题描述 用VS2022创建一个控制台应用后&#xff0c;没有名称空间和Main函数了&#xff0c;只有一个WriteLine&#xff0c;如下所示。 // See https://aka.ms/new-console-template for more information Co…
阅读更多...
今日学习 Mybatis 的关联映射

今日学习 Mybatis 的关联映射

关联映射的三种关系&#xff1a; 我们首先绘制一个简化的 E-R 图来表示三种关联关系。 上图表示的三种关系&#xff1a; 一对一&#xff1a;一个班主任只属于一个班级&#xff0c;一个班级也只能有一个班主任一对多&#xff1a;一个班级有多个学生&#xff0c;一个学生只属于…
阅读更多...
全网最细讲解如何实现导出Excel压缩包文件

全网最细讲解如何实现导出Excel压缩包文件

写在前面的话 接下来我会使用传统的RESTful风格的方式结合MVC的开发模式给大家介绍一下如何去实现标题的效果。 基本思路讲解 先从数据库中查询出一组人员信息记录&#xff0c;保存在List list中。遍历这个列表&#xff0c;对于每一个人员信息&#xff0c;将其填充到一个Excel…
阅读更多...
小白学Python：提取Word中的所有图片，只需要1行代码

小白学Python：提取Word中的所有图片，只需要1行代码

#python# 大家好&#xff0c;这里是程序员晚枫&#xff0c;全网同名。 最近在小破站账号&#xff1a;Python自动化办公社区更新一套课程&#xff1a;给小白的《50讲Python自动化办公》 在课程群里&#xff0c;看到学员自己开发了一个功能&#xff1a;从word里提取图片。这个…
阅读更多...
pytorch安装教程

pytorch安装教程

写在前面&#xff1a;配置pytorch着实有很多坑&#xff0c;不过最终结果算好的&#xff0c;话不多说&#xff0c;直接上干货。其中想要知道如何解决torch.cuda.is_available(&#xff09;返回false的&#xff0c;直接跳到步骤5pytorch安装。python版本至少是3.6及以上。 1、前…
阅读更多...
API 设计/开发/测试工具：Apifox与怎么通过拦截器

API 设计/开发/测试工具：Apifox与怎么通过拦截器

目录 一、测试接口如何创建&#xff1f; 二、如何添加body和header&#xff1f; 三、如果项目设置的有拦截器&#xff1f; 四、拦截器概念&#xff1a; 4.1使用拦截器概念 4.2 先写一个配置类WebMvcConfig.java 4.3 AuthInitInterceptor拦截器中实现 一、测试接口如何创建…
阅读更多...
Linux 内存workingset Refault Distance算法源码及源码解析

Linux 内存workingset Refault Distance算法源码及源码解析

概述 内核mm子系统中有一个workingset.c实现了refault distance算法&#xff0c;发现网络逻辑介绍该算法的文章主要是复制自奔跑吧内核一书中的内容&#xff0c;均比较雷同&#xff0c;讲述的角度比较难以理解&#xff0c;我第一看到的时候琢磨了2天才明白&#xff0c;本文希望…
阅读更多...
Python中使用EMD（经验模态分解）

Python中使用EMD（经验模态分解）

在Python中使用EMD&#xff08;经验模态分解&#xff09;进行信号分解时&#xff0c;通常可以设置信号分解的数目。EMD算法的目标是将信号分解成多个称为“本征模态函数”&#xff08;Intrinsic Mode Functions&#xff0c;简称IMF&#xff09;的成分&#xff0c;每个IMF都代表…
阅读更多...
调试（修复错误）

调试（修复错误）

什么是一个软件bug&#xff1f; ● 软件错误:计算机程序中的缺陷或问题。基本上&#xff0c;计算机程序的任何意外或非预期的行为都是软件缺陷。 ● bug在软件开发中是完全正常的! ● 例如&#xff0c;现在我们存在数组&#xff0c;我们现在需要将这个数组颠倒排序 意外的结…
阅读更多...
7.15 SpringBoot项目实战 【学生入驻】（上）：从API接口定义 到 Mybatis查询 串讲

7.15 SpringBoot项目实战 【学生入驻】（上）：从API接口定义 到 Mybatis查询 串讲

文章目录 前言一、service层 和 dal层方式一、Example方式方式二、Mybatis XML方式方式三、Mybatis 注解方式 二、web层 StudentController最后 前言 接下来我们实战【学生入驻】&#xff0c;对于C端学生端&#xff0c;一切交互开始于知道 当前学生是否入驻、是否有借阅资格&a…
阅读更多...
【重新定义matlab强大系列十五】非线性数据拟合和线性拟合-附实现过程

【重新定义matlab强大系列十五】非线性数据拟合和线性拟合-附实现过程

&#x1f517; 运行环境&#xff1a;Matlab &#x1f6a9; 撰写作者&#xff1a;左手の明天 &#x1f947; 精选专栏&#xff1a;《python》 &#x1f525; 推荐专栏&#xff1a;《算法研究》 #### 防伪水印——左手の明天 #### &#x1f497; 大家好&#x1f917;&#x1f91…
阅读更多...
人绒毛膜促性腺激素（HCG）介绍

人绒毛膜促性腺激素（HCG）介绍

人绒毛膜促性腺激素 HCG&#xff09;是妊娠期产生的一种肽类激素&#xff0c;由受孕后不久的胚胎产生&#xff0c;随后由合胞体滋养层&#xff08;胎盘的一部分&#xff09;合成。它的作用是防止卵子黄体的解体&#xff0c;从而维持孕酮的分泌&#xff0c;而孕酮对人类怀孕至关…
阅读更多...
常用圆圈字符“圆圈字符替换器”

常用圆圈字符“圆圈字符替换器”

本文收录了162个常用圆圈字符&#xff0c;文内有“圆圈字符自动替换器”。 (本笔记适合熟悉字符串数据类型的 coder 翻阅) 【学习的细节是欢悦的历程】 Python 官网&#xff1a;https://www.python.org/ Free&#xff1a;大咖免费“圣经”教程《 python 完全自学教程》&#x…
阅读更多...
分享从零开始学习网络设备配置--任务3.6 使用默认及浮动路由实现网络连通

分享从零开始学习网络设备配置--任务3.6 使用默认及浮动路由实现网络连通

任务描述 某公司随着规模的不断扩大&#xff0c;现有北京总部和天津分部2个办公地点&#xff0c;分部与总部之间使用路由器互联。该公司的网络管理员经过考虑&#xff0c;决定在总部和分部之间的路由器配置默认路由和浮动路由&#xff0c;减少网络管理&#xff0c;提高链路的可…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023