【Vue】Vuex详解

小游坦之 2023-03-28 原文

【前言】本博客系统的讲诉了Vuex的安装、搭建。以及Actions、Mutations、State、Getters的使用，为什么使用mapState、mapGetters以及一些细节的解释

Vuex原理讲解

编辑

Actions：词义是动作行为

Mutations:词义是加工、维护

State:词义是状态和数据

Dispatch：词义是派遣、发出

Commit：提交

Render: 渲染

Mutate：转变

从这些单词中，大体上可以概括整个图的流程。

VC派发（Dispatch）消息到Actions，Actions提交（Commit）到Mutation，Mutation转变（Mutate）state，然后重新渲染整个页面。

1、安装vuex组件

注意：vue3只能用vuex4版本，vue2只能用vuex3版本。2022年2月7日之后，vue3成了默认版本，vuex4相应的也成了默认版本。所以对于vue2，要注明vuex的版本 @3

编辑

在package.json里看到vuex就说明安装成功了

编辑

2、使用Vuex

首先需要创建一个Store。

在Src中，创建一个名为store的文件夹，里面包含一个index.js的文件

编辑

由上面那个原理图可以看出来，store里面至少包含Actions，Mutations，State。

如下图

（创建Store实例，需要用到Vuex.Store所以需要引用Vuex）

Vue.use(Vuex）的作用就是让vue承认store这个属性，否则初始化Vc的时候，vue不会解析store这个属性

编辑

main.js配置如下

其中store相当于store:store。根据ES6语法规则，如果key和value一样，可以简写成key的形式

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

这样Vuex的架子就搭好了，实战演练一下，并借此机会深入的介绍一下Vuex里面的属性。

【求和案例】

流程讲解：点击button按钮，触发点击事件，派发消息去Actions里面找addSum，并且携带参数1。在Actions里面，接受参数，向Mutation提交，携带参数1。Mutation里改变state里的sum的值，vue检测到sum改变，重新渲染整个页面。

效果图：

编辑

Coute.vue

<template>
    <div>
        <h1>当前的值是:{{sum}}</h1>
        <button @click="addSum">点我加1</button>
        <button>点我减1</button>
    </div>
</template>

<script>
export default {
    name:"Coute",
    methods:{
        addSum()
        {
            this.$store.dispatch('addSum',1);
        }
    },
    computed:{
        sum()
        {
            return this.$store.state.sum;
        }
    }
}
</script>

<style>
    button{
        margin-right: 2px;
    }
</style>

store.js

import Vuex from 'vuex'
import Vue from 'vue'
Vue.use(Vuex)
const state = {
    sum:1
};
const mutations={
    ADDSUM(state,value)
    {
        state.sum+=value;
    }
};
const actions={
    addSum(context,value)
    {
        context.commit('ADDSUM',value);
    }
};
export default new Vuex.Store({
    state,
    mutations,
    actions
})

详细看一下Action和Mutations里面的可以携带参数

Actions

设置四个参数，并打印一下。

编辑

结果只输出了两个参数，第一个参数是一个对象，里面包含了commit，dispatch等属性，第二个参数就是要携带的值；

其中第二个参数叫做value，第一个参数通常叫做Context，里面最常用的是Commit。如果只想获得Commit也可以写成这种形式

编辑

Mutations

编辑

同样Mutations里面也是只有两个参数，其中第一个是state（看到了sum），第二个就是携带的、值。Mutations最大的作用就是可以改变state的值。

疑问：为什么需要一个Actions，求和案例之中，我把参数传给Actions，Actions原封不动的又传给了Mutations，为什么我不直接传给Mutations呢？

答：确实是这样子。如果参数确定的话，可以跳过Actions，直接commit到Mutations里面。但是如果参数不确定的话，比如我需要向服务器要数据，这时候就必须用到Actions发送Ajax。

getters的使用：

如果多个组件都用到一个对state里数据处理过的值，比如求和案例中sum的20倍。通过getters仅处理一次，就可以让多个组件同时使用。

store

import Vuex from 'vuex'
import Vue from 'vue'
Vue.use(Vuex)
const state = {
    sum:1
};
const mutations={
    ADDSUM(state,value)
    {
         state.sum+=value
    }
};
const actions={
    addSum({commit},value)
    {
         commit('ADDSUM',value)
    }
};
const getters = {
    bigSum(state)
    {
        return state.sum*20
    }
}
export default new Vuex.Store({
    state,
    mutations,
    actions,
    getters
})

编辑

Store仓库数据的使用：

编辑

现在我们有多个数据，怎么样在任意组件里面访问的到呢？为了表现出组件之间的通信。新建一个组件Information

答案就是在Computed里面获得

<template>
  <div>
      <h1>姓名:{{name}}</h1>
      <h1>学校:{{school}}</h1>
      <h1>爵位:{{Marquis}}</h1>
  </div>
</template>

<script>
export default {
    name:'Information',
    computed:{
        school()
        {
            return this.$store.state.school;
        },
        sum()
        {
            return this.$store.state.sum;
        },
        name()
        {
            return this.$store.state.name;
        },
        Marquis()
        {
            return this.$store.state.Marquis;
        }
    }
}
</script>

<style>

</style>

效果图

编辑

GetState 的引入

编辑

由上图所示，这样一个一个的写，虽然可以写出来，但是实在是太麻烦了。干的都是一样的工作。所以Vue给我们提供了一个方法。mapState和mapGetters。这两个一个是简化State里的属性，一个是简化getters里面的属性。

第一种方法可以简写成下面这种形式。（对象写法。函数的名字可以随意）

编辑

为什么要用...mapState。

原因：mapState报错

编辑

为什么报错呢？

输出一下mapState()来看看。

编辑

mapState里面是一个对象。computed本身也是一个对象。{}里面再加一个{}，是肯定会报错的。

那为什么用...呢，ES6用法中，一个对象t1，一个对象t2，t1{...t2}就相当于，把t2中的属性全拿出来一个个放到t1里面。

第二种方法：数组方法（state里面的属性是什么就必须写什么）

编辑

效果都是可以的

编辑

mapGetters同理，就不赘述了

【错误示范--使用Vuex时】

Vue.use(Vuex)在main.js里面使用

main.js

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

import Vuex from 'vuex'

const state = {
   
};
const mutations={
    
};
const actions={
    
};
const getters = {
    
}
export default new Vuex.Store({
    state,
    mutations,
    actions,
    getters
})

编辑

你发现报了一个这样的错误（Vue.use(Vuex)应该在创建store之前执行），然后仔细检查了一遍，确认Vue.use(Vuex)写在了引入store之前。为什么还报错呢？这里我想说的就是Vue在解析代码的时候，会按顺序首先执行所有的import的语句，所以Vue.use(Vuex)只能写在store里面

【报错】

编辑

语法校验不过关，在vue.config.js加上这句lintOnSave:false（关闭语法校验）

编辑

详解 Vuex style Vue VuexJavaScript 前端开发

有关【Vue】Vuex详解的更多相关文章

计算机毕业设计ssm+vue基本微信小程序的小学生兴趣延时班预约小程序 - 2
项目介绍随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱小学生兴趣延时班预约小程序的设计与开发被用户普遍使用,为方便用户能够可以随时进行小学生兴趣延时班预约小程序的设计与开发的数据信息管理,特开发了小程序的设计与开发的管理系统。小学生兴趣延时班预约小程序的设计与开发的开发利用现有的成熟技术参考,以源代码为模板,分析功能调整与小学生兴趣延时班预约小程序的设计与开发的实际需求相结合,讨论了小学生兴趣延时班预约小程序的设计与开发的使用。开发环境开发说明：前端使用微信微信小程序开发工具：后端使用ssm：VU
物联网MQTT协议详解 - 2
一、什么是MQTT协议MessageQueuingTelemetryTransport：消息队列遥测传输协议。是一种基于客户端-服务端的发布/订阅模式。与HTTP一样，基于TCP/IP协议之上的通讯协议，提供有序、无损、双向连接，由IBM（蓝色巨人）发布。原理：（1）MQTT协议身份和消息格式有三种身份：发布者（Publish）、代理（Broker）（服务器）、订阅者（Subscribe）。其中，消息的发布者和订阅者都是客户端，消息代理是服务器，消息发布者可以同时是订阅者。MQTT传输的消息分为：主题（Topic）和负载（payload）两部分Topic，可以理解为消息的类型，订阅者订阅（Su
(附源码)vue3.0＋.NET6实现聊天室(实时聊天SignalR) - 2
参考文章搭建文章gitte源码在线体验可以注册两个号来测试演示图：一.整体介绍　　介绍SignalR一种通讯模型Hub(中心模型，或者叫集线器模型)，调用这个模型写好的方法，去发送消息。　　内容有：　　　　①：Hub模型的方法介绍　　　　②：服务器端代码介绍　　　　③：前端vue3安装并调用后端方法　　　　④：聊天室样例整体流程：1、进入网站->调用连接SignalR的方法2、与好友发送消息->调用SignalR的自定义方法前端通过，signalR内置方法.invoke() 去请求接口3、监听接受方法（渲染消息）通过new signalR.HubConnectionBuilder().on
Tcl脚本入门笔记详解（一） - 2
TCL脚本语言简介•TCL（ToolCommandLanguage）是一种解释执行的脚本语言（ScriptingLanguage）,它提供了通用的编程能力：支持变量、过程和控制结构；同时TCL还拥有一个功能强大的固有的核心命令集。TCL经常被用于快速原型开发，脚本编程，GUI和测试等方面。•实际上包含了两个部分：一个语言和一个库。首先，Tcl是一种简单的脚本语言，主要使用于发布命令给一些互交程序如文本编辑器、调试器和shell。由于TCL的解释器是用C\C++语言的过程库实现的，因此在某种意义上我们又可以把TCL看作C库，这个库中有丰富的用于扩展TCL命令的C\C++过程和函数，所以，Tcl是
【详解】Docker安装Elasticsearch7.16.1集群 - 2
开门见山|拉取镜像dockerpullelasticsearch:7.16.1|配置存放的目录#存放配置文件的文件夹mkdir-p/opt/docker/elasticsearch/node-1/config#存放数据的文件夹mkdir-p/opt/docker/elasticsearch/node-1/data#存放运行日志的文件夹mkdir-p/opt/docker/elasticsearch/node-1/log#存放IK分词插件的文件夹mkdir-p/opt/docker/elasticsearch/node-1/plugins若你使用了moba，直接右键新建即可如上图所示依次类推创建
【Elasticsearch基础】Elasticsearch索引、文档以及映射操作详解 - 2
文章目录概念索引相关操作创建索引更新副本查看索引删除索引索引的打开与关闭收缩索引索引别名查询索引别名文档相关操作新建文档查询文档更新文档删除文档映射相关操作查询文档映射创建静态映射创建索引并添加映射概念es中有三个概念要清楚，分别为索引、映射和文档（不用死记硬背，大概有个印象就可以）索引可理解为MySQL数据库；映射可理解为MySQL的表结构；文档可理解为MySQL表中的每行数据静态映射和动态映射上面已经介绍了，映射可理解为MySQL的表结构，在MySQL中，向表中插入数据是需要先创建表结构的；但在es中不必这样，可以直接插入文档，es可以根据插入的文档（数据），动态的创建映射（表结构），这就
最强Http缓存策略之强缓存和协商缓存的详解与应用实例 - 2
HTTP缓存是指浏览器或者代理服务器将已经请求过的资源保存到本地，以便下次请求时能够直接从缓存中获取资源，从而减少网络请求次数，提高网页的加载速度和用户体验。缓存分为强缓存和协商缓存两种模式。一.强缓存强缓存是指浏览器直接从本地缓存中获取资源，而不需要向web服务器发出网络请求。这是因为浏览器在第一次请求资源时，服务器会在响应头中添加相关缓存的响应头，以表明该资源的缓存策略。常见的强缓存响应头如下所述：Cache-ControlCache-Control响应头是用于控制强制缓存和协商缓存的缓存策略。该响应头中的指令如下：max-age：指定该资源在本地缓存的最长有效时间，以秒为单位。例如：Ca
IDEA 2022 创建 Spring Boot 项目详解 - 2
如何用IDEA2022创建并初始化一个SpringBoot项目？目录如何用IDEA2022创建并初始化一个SpringBoot项目？0. 环境说明1. 创建SpringBoot项目 2.编写初始化代码0. 环境说明IDEA2022.3.1JDK1.8SpringBoot1. 创建SpringBoot项目打开IDEA，选择NewProject创建项目。填写项目名称、项目构建方式、jdk版本，按需要修改项目文件路径等信息。选择springboot版本以及需要的包，此处只选择了springweb。此处需特别注意，若你使用的是jdk1
vue 实现内容超出两行显示展开更多功能，可依据需求自定义任意行数！ - 2
平时开发中我们经常会遇到这样的需求，在一个不限高度的盒子中会有很多内容，如果全部显示用户体验会非常不好，所以可以先折叠起来，当内容达到一定高度时，显示展开更多按钮，点击即可显示全部内容，先来看看效果图：这样做用户体验瞬间得到提升，接下来看看具体细节。0">主要操作在内容这里{{item.username}},……展开更多样式大家可依据自己项目需求进行设计，这里就不贴了，主要说几个关键的。1、在data中定义三个属性isShowMore:false, //控制展开更多的显示与隐藏textHeight:null, //框中内容的高度status:false, //内容状态是否打开2.计算内容是否
详解Unity中的粒子系统Particle System (二) - 2
前言上一篇我们简要讲述了粒子系统是什么，如何添加，以及基本模块的介绍，以及对于曲线和颜色编辑器的讲解。从本篇开始，我们将按照模块结构讲解下去，本篇主要讲粒子系统的主模块，该模块主要是控制粒子的初始状态和全局属性的，以下是关于该模块的介绍，请大家指正。目录前言本系列提要一、粒子系统主模块1.阅读前注意事项2.参考图3.参数讲解DurationLoopingPrewarmStartDelayStartLifetimeStartSpeed3DStartSizeStartSize3DStartRotationStartRotationFlipRotationStartColorGravityModif