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

相关推荐
Martin -Tang28 分钟前
vite和webpack的区别
前端·webpack·node.js·vite
迷途小码农零零发29 分钟前
解锁微前端的优秀库
前端
王解1 小时前
webpack loader全解析,从入门到精通(10)
前端·webpack·node.js
老码沉思录1 小时前
写给初学者的React Native 全栈开发实战班
javascript·react native·react.js
我不当帕鲁谁当帕鲁1 小时前
arcgis for js实现FeatureLayer图层弹窗展示所有field字段
前端·javascript·arcgis
那一抹阳光多灿烂2 小时前
工程化实战内功修炼测试题
前端·javascript
放逐者-保持本心,方可放逐2 小时前
微信小程序=》基础=》常见问题=》性能总结
前端·微信小程序·小程序·前端框架
毋若成4 小时前
前端三大组件之CSS,三大选择器,游戏网页仿写
前端·css
红中马喽5 小时前
JS学习日记(webAPI—DOM)
开发语言·前端·javascript·笔记·vscode·学习
Black蜡笔小新5 小时前
网页直播/点播播放器EasyPlayer.js播放器OffscreenCanvas这个特性是否需要特殊的环境和硬件支持
前端·javascript·html