Vue状态管理工具Vuex工作原理解析

一、什么是vuex

Vuex是vue项目的状态管理器(状态管理工具)。vue项目的状态是通过vue实例(组件)绑定的变量来体现。所以也可以说vuex是用来管理vue项目中的各种变量(vue项目中的组件可以访问vuex中管理的变量——方便了组件的通信)

二、vuex的工作方式

(1)在全局中定义一个state:state本质是一个对象,该对象的属性就是vue组件用到的变量(所有组件共享这些变量)

(2)在vue组件中若要更新state的值,必须通过mutation来进行(只能通过mutation去改变state的状态),只能同步修改(即mutation中的方法都是同步的)

(3)若要异步的修改state的值,需要通过action来进行(action不能直接修改state,但是它可以向mutation发起请求,由mutation来修改state的值,可以在action中定义异步方法)

三、vuex的使用场景

(1)不适合:小型的简单应用

(2)适合:中大型单页面应用

多个视图(多个组件)依赖同一个状态

不同的视图的行为需要改变同一个状态

四、工作流程

View-->Action-->Mutations-->State-->View

五、vuex的核心API

(1)state:

必须是唯一的

本质是一个对象,维护的是vue的状态

const state = {

属性名:初始化值

}

state:{

属性名:初始化值

}

(2)mutations

作用:用来修改state

定义了多个用于修改state的方法

只能包含同步代码

定义方式:

const mutations = {

方法名1(state,[data]){

//更改state的属性值

},

方法名2(state,[data]){

//更改state的属性值

},

}

触发方式:

(1)在actions中通过commit('mutations 的方法名')实现触发

(2)在组件中通过 this.$store.commit('方法名',params)实现触发

(3)actions:通过actions去触发mutations中的方法,实现对state的异步修改

  • 可以包含异步代码
  • 通过commit触发mutations来间接修改state
  • 触发方式(如何触发actions):在组件中通过this.$store.dispatch('action名称',data1)进行触发
  • 定义方式

const actions = {

方法名({commit,state},data1){

commit('mutations中的方法名')

}

}

(4)getters:用于获取state的属性值,类似于state的计算属性

定义方法:

const getters = {

方法名([参数]){

return state.属性名

}

}

在组件中的使用方式: this.$store.getters.方法名

(5)modules:在大型项目中用于管理多个子模块的state

六、应用

注意版本:vuex3对应的vue2,vuex4对应的vue3

(1)安装vuex

npm install vuex@3 | npm i vuex@3 -S

(2)定义vuex的store(仓库)

src/store/store.js

导入vue和vuex

import Vue from 'vue'
import Vuex from 'vuex'
//全局注册vuex
Vue.use(Vuex)
//定义全局的store:即定义全局的状态管理器(数据仓库)
export default new Vuex.Store({
 state:{ },
 mutations:{},
 actions:{},
 getters:{},
 modules:{}
})

在main.js文件中进行配置

import Vue from 'vue'
import App from './App.vue'
// 导入vuex的配置文件
import store from "@/store/store";
// 在vue实例中引用
new Vue({
 store,
 render: function (h) { return h(App) },
}).$mount('#app')

注:

在组件中触发mutations中定义的方法:触发同步方法

this.$store.commit('mutations中定义的方法名',参数)

在组件中触发actions中定义的方法:触发异步方法

this.$store.dispatch('actions中定义的方法名')

获取state中属性值的方法:

1.直接获取:this.$store.state.属性名

2.通过getters:this.$store.getters.属性名

在定义vuex的store实例时不能使用this

七、vuex的工作流程

(1)在组件中通过commit直接向mutations提交修改state的请求、或者通过dispatch向actions派发请求

(2)mutations通过接收到的请求去修改state的状态

作者:秃头小宋s原文地址:https://blog.csdn.net/m0_73634593/article/details/128807085

%s 个评论

要回复文章请先登录注册