vue-Vuex详解

最新推荐文章于 2024-08-30 23:56:34 发布

秃头小小girl

最新推荐文章于 2024-08-30 23:56:34 发布

阅读量837

点赞数 11

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

本文链接：https://blog.csdn.net/m0_64081601/article/details/137036215

版权

vue3 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

一、Vuex是什么

概念：专门在Vue中实现集中式状态（数据）管理的一个Vue插件，对Vue应用中多个组件的共享状态进行集中式的管理（读/写），也是一种组件间通信的方式，且适用于任意组件间进行通信

其实对于任意组件间通信也可以通过全局事件总线来完成，对数据管理包含数据的读和写，但是对于全局事件总线传递数据我们之前接触的只涉及读，而未涉及写数据（修改数据），当我们用全局事件总线同时读数据，修改数据的时候就会使代码变得混乱

然而当我们使用vuex后，将每个组件都要使用的数据都放在vuex中，可以简化代码，进行数据的集中式管理，进行读写数据也非常方便

二、什么时候使用Vuex

Vue官方解释：

多个组件依赖于同一状态
来自不同组件的行为（事件）需要变更同一状态

其实简单来说就是多个组件需要共享数据的时候进行使用，其中的状态就是数据

三、vuex原理图

依上图可以得到，vuex包含三大重要的部分，分别是Actions,Mutations,State

Actions用于处理组件中的逻辑
Mutations用于操作state中的数据
State用于存放数据

流程为：组件通过dispatch方法去联系actions处理组件中的业务逻辑，然后actions又通过commit方法去联系mutations去操作数据，进而更新state中的数据，将新的数据渲染到页面上

注：如组件无业务逻辑需要处理，则可以直接使用commit联系mutations处理数据

四、搭建Vuex环境

1.安装Vuex

若用的vue2，使用vuex的3版本

npm install vuex@3

若用的vue3，使用vuex的4版本

npm install vuex@4

2.引入vuex

在src下创建一个store-->index.js,进行如下配置，在main.js中进行引入

// 该文件用于创建vuex中核心的store

// 引入Vue
import Vue from 'vue'
Vue.use(Vuex)
// 引入vuex
import Vuex from 'vuex'
// 准备actions-->用于响应组件中的动作
const actions = {}
// 准备mutilations--->用于操作数据state
const mutilations = {}
//准备getters--->用于存放store中计算得来的数据，相当于computed
const getters={}
// 准备sate--->用于存储数据
const state = {}

// 创建并暴露store
export default new Vuex.Store({
  actions,
  mutilations,
  state,
  getters
})

main.js中引入并使用store

五、store的配置详解

1.state用于存放多个组件共享的数据

使用：

方法一：组件中读取vuex中的数据：{{$store.state.属性名}}

方法二：依靠计算属性返回state中的值

方法三：引入mapState进行自动生成第二种方法的代码

写法一：对象写法，借助mapstate生成计算属性，从state中读取数据，前者是生成的计算属性名，后者是state中的数据名

写法二：数组写法，和对象写法原理相同，但是和对象写法不同的是，若要用着这种写法，生成的计算属性名必须与state中数据的名字保持一致

2.actions主要进行业务逻辑的处理，进行异步操作

actions中的函数有两个参数，一个是context,context相当于一个小型的store,里面含有dispatch,commit,state等等，另一个是从组件中传过来的数据

在actions中进行接收数据并处理业务逻辑之后，调用commit将数据传递给mutations处理

使用：

方法一：编写自定义事件,在methods自定义事件函数里面调用dispatch方法联系actions中定义的函数，并将数据传递过去

方法二：引入mapActions，帮助生成第一步methods中的代码

在绑定事件地方传入要给actions的数据

第一种写法：对象写法，使用mapActions生成对应的方法，方法中会调用dispatch去联系actions，第一个是methods中的函数名，第二个是actions中的函数名

第二种写法：数组写法，与上述mapState相同，这里不再赘述，两个名字相同则可以浓缩为数组写法

3.mutations主要对数据进行处理

mutations中的函数有两个参数，一个是在组件中传过来的数据，另一个是state中的数据

使用：

1.若组件不存在业务逻辑时

方法一：直接在methods中调用commit方法直接联系mutations操作数据

方法二：引入mapMutations

绑定事件时传入要传给mutations的数据

使用mapMutations生成对应的方法，方法中会调用commit去联系mutations

写法一：对象写法，第一个是methods函数中的方法名，第二个是mutations中的方法名

写法二：与上述mapState,mapActions一样，若两个名字相同用数组

2.若存在业务逻辑，则要通过第一步的actions进行commit，传递数据给mutations