【Vue知识点】Vuex的详解

Array[林]

已于 2022-07-27 20:25:55 修改

阅读量385

点赞数

分类专栏：前端前端——Vue 文章标签： vue.js 前端 javascript

于 2022-07-27 20:25:02 首次发布

本文链接：https://blog.csdn.net/m0_50785976/article/details/125927194

版权

前端同时被 2 个专栏收录

33 篇文章 4 订阅

订阅专栏

前端——Vue

8 篇文章 0 订阅

订阅专栏

文章目录

什么是Vuex？
为什么要使用Vuex？
什么时候使用Vuex？
Vuex工作原理图解
Vuex中的各个核心概念
具体如何使用Vuex（代码示例）
- 安装并使用Vuex
- 代码案例

什么是Vuex？

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库，是一个Vue插件。它采用集中式存储管理应用的所有组件的状态（读/写），并以相应的规则保证状态以一种可预测的方式发生变化。这也是一种组件间通信的方式，且适用于任意组件间通信

为什么要使用Vuex？

Vuex 可以帮助我们管理共享状态，并附带了更多的概念和框架。这需要对短期和长期效益进行权衡。

如果您不打算开发大型单页应用，使用 Vuex 可能是繁琐冗余的。确实是如此——如果您的应用够简单，您最好不要使用 Vuex。一个简单的 store 模式就足够您所需了。但是，如果您需要构建一个中大型单页应用，您很可能会考虑如何更好地在组件外部管理状态，Vuex 将会成为自然而然的选择。

什么时候使用Vuex？

1.多个组件依赖于同一种状态

2.来自不同组件的行为需要变更同一状态

Vuex工作原理图解

Vuex的工作原理

首先我们从环形Vuex中的state入手，state对象存放的就是一些需要共享的数据，然后通过render渲染到需要使用共享数据的各个组件上去
组件调用dispatch分发到Actions上（dispatch函数需要传两个参数，第一个参数为数据的操作方法，第二个类型是数据），Actions对象上一定有一个key值对应数据的操作方法，再根据该方法对传过来的数据进行操作；
在Actions中通过commit提交至Mutations（commit函数的参数于dispatch函数的参数一致），Mutations对象上一定有一个key值对应数据的操作方法，再根据该方法对传过来的数据进行操作，在Mutations中修改state的值，
Mutations修改完state的值后重新渲染页面，进入循环…

注意：

只能在mutaions里修改state，actions不能直接修改state
一般是在Actions中与服务器进行交互，例如dispatch传过来的参数只有数据的操作方法，这时候就得发送请求，请求后台数据再提交commit到Mutations
组件可以直接通过Mutations修改State的值，如果组件没有与服务器进行交互，可以不经过Actions
Mutaions中调用Devtools这个vuex官方给出的开发者调试工具对State进行修改和修饰
图中的Actions、Mutations、State必须得由store进行管理

Vuex中的各个核心概念

state

state属性是Vuex中用于存放组件之间共享的数据。它采用的是单一状态树——用一个对象就包含了全部的应用层级状态。这也意味着，每个应用将仅仅包含一个 store 实例。单一状态树让我们能够直接地定位任一特定的状态片段，在调试的过程中也能轻易地取得整个当前应用状态的快照。

mutation

官网的定义是：更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。
不能直接调用一个 mutation 处理函数，唤醒一个 mutation 处理函数，你需要以相应的 type 调用 store.commit 方法

action

Action 类似于 mutation，不同在于：

Action 提交的是 mutation，而不是直接变更状态。
Action 可以包含任意异步操作。

getter

作为state的派生属性（类似于store的计算属性）

Module

由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。
Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割

辅助函数

mapState、mapGetters、mapActions、mapMutations作为vuex中属性的辅助函数
mapState可以帮助组件一次获取多个状态
mapGetters将 store 中的 getter 映射到局部计算属性
mapActions、mapMutations则可以帮助组件一次获取到多个方法

对象展开运算符（例如…mapState）可以帮助我们与组件的局部计算属性混合使用

具体如何使用Vuex（代码示例）

安装并使用Vuex

1.安装vuex
在当前项目下的终端输入该语句：
npm i vuex

注意：从2022年2月7日起，vue3成为了默认版本，执行npm i vuex安装的直接就是vue3，vue3成为默认版本的同时，vuex也更新到了4版本，执行npm i vuex，安装的就是vuex4版本，vuex4版本只能在vue3中使用，所以要安装vuex的指定版本npm i vuex@3。

2.全局注册vuex

3.创建一个store文件夹
创建store文件夹

4.让所有组件都看得见store

在main.js中引入store文件

引入store

在创建vm时可以引入一个store值

引入store

此时在所有的组件实例中多了一个$store属性，代表vuex安装成功。

在这里插入图片描述

代码案例

设置几个按钮实现数字的增加，减少，以及奇数再加和过两秒后再加；可指定增加的数字大小
首先我们要确定需要共享的数据，将其放入state对象中
state
将增加、减少、奇数再加和过两秒后再加的方法先写入actions中，并通过commit提交到Mutations对象中（Mutations中不能直接对）在组件中通过dispatch去触发actions对象中的方法，拿增加方法来举例：

//在组件中
addNum(){
      this.$store.dispatch('add',this.n)
    },
//在store文件中
actions：{
      add(context,value){
      console.log(context,value)
      context.commit('ADD',value)
    },
} 
mutations：{
     ADD(state,value){
      console.log(state,value)
      state.sum+=value
    },
}