Vuex简介及使用示例

全栈开发日记

发布于 2022-05-13 15:08:15

6650

发布于 2022-05-13 15:08:15

文章被收录于专栏：全栈开发日记

Vuex概念及工作原理

01 - 概念

专门在 Vue 中实现集中式状态（数据）管理的一个 Vue 插件，将 Vue 应用中多个组件的共用数据交给store进行集中式的管理，任意组件都可以使用和修改这些共用的数据，也是一种组件间通信的方式，且适用于任意组件间通信。

02 - 使用场景

1、多个组件需要使用同一数据

2、来自不同组件的行为需要变更同一数据

03 - 搭建Vuex环境

安装vuex

npm i vuex

新建文件src/store/index.js，在store中配置state、actions、mutations三个对象，并暴露store

//该文件用于创建Vuex核心store

//引入vue核心库
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
//使用vuex插件，需要引入vue
Vue.use(Vuex)

//actions用于响应组件中的动作
const actions = {}
//mutations用于操作state中的数据
const mutations = {}
//state用于存储具体数据
const state = {}

//创建并暴露（导出）store
export default new Vuex.Store({
    actions,
    mutations,
    state
})

main.js中

脚手架会将所有import语句汇总到文件最上方执行，需要先使用vuex再创建store，所以移动Vue.use(Vuex)到store中

//引入vuex，在store中已经引入，此处不再需要

//引入store
import store from './store/index'

//引入才能配置store
new Vue({
    store
})

配置完成后，即可在组件中使用$store.state读取vuex中的数据

补充一下非必须配置项getters

//用于将state中的数据加工，类似计算属性
const getters = {
    bigSum(state){
        //必须return
        return state*10
    }
}

//记得在store中配置
getters

//组件中读取数据
$store.getters.bigSum

04 - 工作原理

先上原理图

1、state是一个配置对象，用于存储具体的数据

2、Dispatch（相当于迎宾）是API，在组件自定义方法中被调用（eg：this.$store.dispatch("add",value)），携带两个参数，第一个是配置在actions中的需要调用的函数名），第二个是需要传递的值

3、Actions（相当于服务员）是一个配置对象，用于响应组件中的动作，配置项为一个个函数，eg：add(context,value){}，需要向后端发送请求或者有其他逻辑时必需，不需要时可以直接在组件中通过this.$store.commit("ADD",value)触发Mutations中的ADD方法；两个参数，一个是context对象（上下文），其中可以拿到我们需要的各种值和方法，可以log出来仔细研究一下，另一个是收到的传递过来的值；回调中调用context.commit("ADD",value) 将值提交给Mutations中配置的函数进行具体对数据的操作

Actions中配置的方法可以将复杂逻辑拆分成几个不同方法，然后通过在回调中context.dispatch("其他逻辑",value)进行传递数据

4、commit('ADD',value)（相当于服务员把点好的单递给后厨的动作）是API，在Actions配置项回调函数中被调用，两个参数，ADD配置在Mutations中

5、Mutations（相当于后厨）是一个配置对象，用于实际操作state中的数据，配置项eg：ADD(state,value){}，回调函数会收到state和value两个参数，函数体中直接对state进行操作，从而实现修改数据

6、其中state、actions、mutations三个对象都被store管理

使用Vuex示例

01 - 组件方法

直接上代码吧，其中包含了没有使用Vuex时的原生操作以及不绕过actions时的操作

methods: {
    add(){
        // this.sum += this.n     不使用vuex时的操作
        // this.$store.dispatch("add",this.n)   完整操作
        this.$store.commit("ADD",this.n)   //绕过actions直接commit的操作
    },
    subt(){
        // this.sum -= this.n      不使用vuex时的操作
        // this.$store.dispatch("subt",this.n)    完整操作
        this.$store.commit("SUBT",this.n)  //绕过actions直接commit的操作
    },
    addOdd(){
        //不使用vuex时的操作
        // if(this.sum % 2){
        //     this.sum += this.n
        // }
        this.$store.dispatch("addOdd",this.n)  //使用vuex
    },
    addWait(){
        //不使用vuex时的操作
        // setTimeout(() => {
        //     this.sum += this.n
        // }, 1000);
        this.$store.dispatch("addWait",this.n)   //使用vuex
    }
}

02 - src/store/index.js配置

//该文件用于创建Vuex核心store

//引入vue核心库
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
//使用vuex插件，需要引入vue
Vue.use(Vuex)

//actions用于响应组件中的动作
const actions = {
//被绕过的actions
    // add(context,value){
    //     context.commit('ADD',value)
    // },
    // subt(context,value){
    //     context.commit('SUBT',value)
    // },
    addOdd(context,value){
        if(context.state.sum % 2){
            context.commit('ADD',value)
        }
    },
    addWait(context,value){
        setTimeout(() => {
            context.commit('ADD',value)
        }, 1000);
    }
}
//mutations用于操作state中的数据
const mutations = {
    ADD(state,value){
        state.sum += value
    },
    SUBT(state,value){
        state.sum -= value
    }
}
//state用于存储具体数据
const state = {
    sum:0
}

//创建并暴露（导出）store
export default new Vuex.Store({
    actions,
    mutations,
    state
})