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的状态

到此这篇关于Vue状态管理工具Vuex工作原理解析的文章就介绍到这了,更多相关Vue Vuex内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

最新评论