Vue2:组件间通信框架Vuex

一、原理图及作用

功能介绍:

简单说就是Vue项目中,各个组件间通信的一种框架

相较于之前的全局事件总线,该框架更实用!

提高了代码的复用率,把核心业务代码,集中到store中,这样,一处实现,处处调用。

原理:
VC 调用 actions
actions调用mutations
mutations调用state
VC读取state

完美闭环!

二、核心代码

安装插件

javascript 复制代码
npm i vuex@3	Vue2的项目,安装Vuex3
npm i vuex@4	Vue3的项目,安装Vuex4

vue_test/src/store/index.js

javascript 复制代码
//该文件用于创建vuex中最为核心的store

//引入Vue
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'

Vue.use(Vuex);

//准备actions     用于响应组件中的动作
const actions = {
    jia(context, value) {
        console.log('actions中的jia被调用了')
        context.commit('JIA', value)
    },
    jian(context, value)  {
        console.log('actions中的jian被调用了')
        context.commit('JIAN', value)
    },
    jiaOdd(context,value){
        console.log('actions中的jiaOdd被调用了')
        if(context.state.sum % 2){
            context.commit('JIA',value)
        }
    },
    jiaWait(context,value){
        console.log('actions中的jiaWait被调用了')
        setTimeout(()=>{
            context.commit('JIA',value)
        },500)
    }
};
//准备mutations       用于操作数据state
const mutations = {
    JIA(state,value){
        console.log('mutations中的JIA被调用了')
        state.sum += value
    },
    JIAN(state,value){
        console.log('mutations中的JIAN被调用了')
        state.sum -= value
    }
};
//准备state       用于存储数据
const state = {
    sum: 0 //当前的和
};

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

main.js

这样配置后,在所有的VC中就可以使用这个store了。

javascript 复制代码
import store from './store/index'

//创建vm,整个项目就这1个vm,其他的都是vc组件
new Vue({
    el:"#app",
    render: h => h(App),
    store,
    beforeCreate() {
        Vue.prototype.$bus = this;     //安装全局总线
    }
});

三、使用案例

1、读取store中的变量值

html 复制代码
{{$store.state.sum}}

2、VC中修改store中的变量值

javascript 复制代码
方式1:
this.$store.dispatch('jia',this.n)
方式2:
this.$store.commit('JIA',this.n)

四、详细说明

1、类比Javamvc

我们可以看到,store中,主要有三个对象

bash 复制代码
actions		    类似于Java的controller接口,业务逻辑
mutations		类似于Java的service层,修改数据
state			类似于Java的dao层,存储数据

2、store中各对象详解
actions对象中的函数参数:
context

有这个context,那么,actions中的函数,就可以调用actions中其它的函数

不一定,actions就要进入mutations步骤。

value

就是调用时传入的具体值。

3、mutations对象中的函数参数:
state:就是store中的state
value:调用时传入的具体参数值。

相关推荐
老家的回忆5 分钟前
jsPDF和html2canvas生成pdf,组件用的elementplus,亲测30多页,20s实现
前端·vue.js·pdf·html2canvas·jspdf
半点寒12W10 分钟前
uniapp全局状态管理实现方案
前端
Vertira11 分钟前
pdf 合并 python实现(已解决)
前端·python·pdf
PeterJXL1 小时前
Chrome 下载文件时总是提示“已阻止不安全的下载”的解决方案
前端·chrome·安全
hackchen1 小时前
从0到1解锁Element-Plus组件二次封装El-Dialog动态调用
前端·vue.js·elementui
用户7579419949701 小时前
Vue响应式原理推导过程
vue.js·响应式设计
君子宜耘心1 小时前
el-table虚拟列表封装
前端
黄瓜沾糖吃1 小时前
大佬们指点一下倒计时有什么问题吗?
前端·javascript
温轻舟1 小时前
3D词云图
前端·javascript·3d·交互·词云图·温轻舟
buibui1 小时前
打包一个工具类
前端