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