Vue2:组件间通信框架Vuex

这篇具有很好参考价值的文章主要介绍了Vue2:组件间通信框架Vuex。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

一、原理图及作用

功能介绍:
简单说就是Vue项目中,各个组件间通信的一种框架
相较于之前的全局事件总线,该框架更实用!
提高了代码的复用率,把核心业务代码,集中到store中,这样,一处实现,处处调用。
原理:
VC 调用 actions
actions调用mutations
mutations调用state
VC读取state
完美闭环!
Vue2:组件间通信框架Vuex,前端,vue.js,javascript,前端

二、核心代码

安装插件

npm i vuex@3	Vue2的项目,安装Vuex3
npm i vuex@4	Vue3的项目,安装Vuex4

vue_test/src/store/index.js

//该文件用于创建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了。

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中的变量值

{{$store.state.sum}}

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

方式1this.$store.dispatch('jia',this.n)
方式2this.$store.commit('JIA',this.n)

四、详细说明

1、类比Javamvc
我们可以看到,store中,主要有三个对象

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

2、store中各对象详解
actions对象中的函数参数:
context
有这个context,那么,actions中的函数,就可以调用actions中其它的函数
不一定,actions就要进入mutations步骤。
Vue2:组件间通信框架Vuex,前端,vue.js,javascript,前端
value
就是调用时传入的具体值。

3、mutations对象中的函数参数:
state:就是store中的state
value:调用时传入的具体参数值。文章来源地址https://www.toymoban.com/news/detail-825785.html

到了这里,关于Vue2:组件间通信框架Vuex的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【干货】Vue2.x 组件通信方式详解,这篇讲全了

    vue是数据驱动视图更新的框架, 我们平时开发,都会把页面不同模块拆分成一个一个vue组件, 所以对于vue来说组件间的数据通信非常重要,那么组件之间如何进行数据通信的呢? 首先我们需要知道在vue中组件之间存在什么样的关系, 才更容易理解他们的通信方式。 一般我们分

    2023年04月27日
    浏览(46)
  • vue(32) : win10创建vue2基础前端框架

    vue2 element-ui axios 含接口调用示例 开发工具为HBuilderX 3.7.3 等待创建项目 代理后端配置如下, 三个test改成相同的uri前缀即可, uri该签注会代理到后端 proxy: {       // 代理test开头的uri       \\\'/test\\\': {         target: \\\'http://192.168.1.1:8080\\\', // 后端地址         changeOrigin: true, // 开启代

    2024年02月06日
    浏览(39)
  • 关于前端框架vue2升级为vue3的相关说明

    一些框架需要升级 当前(202306) Vue 的最新稳定版本是 v3.3.4 。Vue 框架升级为最新的3.0版本,涉及的相关依赖变更有: 前提条件:已安装 16.0 或更高版本的Node.js(摘) 必须的变更:核心库vue@23、路由vue-router@34、状态管理vuex@34 构建工具链: Vue CLI Vite(摘) 状态管理: Vuex Pi

    2024年02月15日
    浏览(51)
  • vue2 vuex

    Vuex 是一个 Vue 的 状态管理工具 ,状态就是数据。 大白话:Vuex 是一个插件,可以帮我们管理 Vue 通用的数据 (多组件共享的数据) 。 使用场景 某个状态 在 很多个组件 来使用 (个人信息) 多个组件 共同维护 一份数据 (购物车) 优势 共同维护一份数据, 数据集中化管理 响应式

    2024年02月09日
    浏览(31)
  • ❤ 全面解析若依框架vue2版本(springboot-vue前后分离--前端部分)

    一般在vue项目public文件夹下命名为“favicon.ico” ❤ 处理步骤 第1步:将图标重命名为“favicon.ico”,并放在项目根目录 下。 第2步:然后在index.html中引入,title中修改页面标题。 第3步:修改build文件夹下 webpack .dev.conf.js和webpack.prod.conf.js文件中的内容。 第五步:重新已经成功

    2024年02月12日
    浏览(56)
  • vue2.x中使用vuex

    Vuex是什么? Vuex是一个专门为Vue.js应用程序开发的状态管理模式。它采用集中式存储来管理应用程序中所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。Vuex也被集成到了Vue的官方调试工具vue-devtools中,提供了诸如零配置的time-travel调试、状态快照导入

    2023年04月13日
    浏览(35)
  • 开始学习Vue2(axios和Vuex)

    一、 Axios 1、 Axios  简介 Axios   是一个基于  promise   网络请 求库 ,作用于 node.j s  和浏   览器中。它是  isomorphic  的(即同一套代码可以运行在浏览器 和 node.js 中)。在服务端它使用原生  node.js http  模块,  而在 客户端   (浏览端)   则使用   XMLHttpRequests。 2、 Axios  的

    2024年02月20日
    浏览(35)
  • Jeecg开发框架前端VUE2数据页面与后端数据库交互实现

    ​ JeecgBoot 是一款基于代码生成器的 低代码 开发平台,零代码开发!采用前后端分离架构:SpringBoot2.x,Ant DesignVue,Mybatis-plus,Shiro,JWT。强大的代码生成器让前后端代码一键生成,无需写任何代码! JeecgBoot引领新的开发模式(Online Coding模式- 代码生成器模式- 手工MERGE智能开发

    2024年02月11日
    浏览(44)
  • Vue2向Vue3过度Vuex核心概念mutations

    1.定义mutations 2.格式说明 mutations是一个对象,对象中存放修改state的方法 3.组件中提交 mutations 4.练习 1.在mutations中定义个点击按钮进行 +5 的方法 2.在mutations中定义个点击按钮进行 改变title 的方法 3.在组件中调用mutations修改state中的值 5.总结 通过mutations修改state的步骤 1.定义

    2024年02月11日
    浏览(44)
  • Vue2:Vuex中使用mapMutations和mapActions

    上一节,我们学会在 vc 的 computed 模块中,使用 mapState和mapGetters 来简化代码 这一节,我们学习在 vc 的 methods 模块中,使用 mapMutations和mapActions 来简化代码 在 vc 的 methods 中,我们会使用到 store 的 dispatch 和 commit 。 如果涉及到许多的方法都要用到 store 那么,这个时候,就可

    2024年02月20日
    浏览(42)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包