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:调用时传入的具体参数值。

相关推荐
周三有雨4 分钟前
【面试题系列Vue07】Vuex是什么?使用Vuex的好处有哪些?
前端·vue.js·面试·typescript
木古古1817 分钟前
使用chrome 访问虚拟机Apache2 的默认页面,出现了ERR_ADDRESS_UNREACHABLE这个鸟问题
前端·chrome·apache
爱米的前端小笔记26 分钟前
前端八股自学笔记分享—页面布局(二)
前端·笔记·学习·面试·求职招聘
loey_ln1 小时前
webpack配置和打包性能优化
前端·webpack·性能优化
建群新人小猿1 小时前
会员等级经验问题
android·开发语言·前端·javascript·php
爱上语文1 小时前
HTML和CSS 表单、表格练习
前端·css·html
djk88881 小时前
Layui Table 行号
前端·javascript·layui
今天啥也没干1 小时前
使用 Sparkle 实现 macOS 应用自定义更新弹窗
前端·javascript·swift
痴憨道人1 小时前
openharmony sdk描述
javascript