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

相关推荐
pink大呲花6 分钟前
Vue 跨域解决方案及其原理剖析
前端·javascript·vue.js
亦世凡华、8 分钟前
前端npm包发布流程:从准备到上线的完整指南
前端·经验分享·npm·node.js·npm发包
Python私教14 分钟前
全栈开发实战:FastAPI + React + MongoDB 构建现代Web应用
前端·react.js·fastapi
110546540126 分钟前
7、三维机械设计、装配与运动仿真组件 - /设计与仿真组件/3d-mechanical-designer
前端·javascript·3d
東雪木1 小时前
Web开发—Vue工程化
前端·javascript·vue.js·前端框架·web
全栈凯哥1 小时前
ES6 (ECMAScript 2015) 详解
前端·ecmascript·es6
二狗子的翠花1 小时前
vue-grid-layout实现拖拽修改工作台布局
前端·javascript·vue.js
想不明白的过度思考者1 小时前
为了结合后端而学习前端的学习日志(1)——纯CSS静态卡片案例
前端·css·学习
未来之窗软件服务2 小时前
打开所在文件路径,鸿蒙系统,苹果macos,windows,android,linux —智能编程—仙盟创梦IDE
前端·ide·资源管理器·仙盟创梦ide
houzhizhen2 小时前
SQL JOIN 关联条件和 where 条件的异同
前端·数据库·sql