我的第一个项目(十三) :组件间传值的一些方案(vuex,eventbus,localStorage)

第一个,项目,十三,组件,一些,方案,vuex,eventbus,localstorage · 浏览次数 : 21

小编点评

**1. eventBus 前端兄弟组件传值事件** - 组件 `Mylogin.vue` 中定义了一个 `login` 方法,触发 `bus.$emit` 方法。 - `bus.$emit` 方法用于在事件 bus 中触发 `getLoginName` 事件。 - `Game.vue` 组件中注册了 `bus.$on` 事件监听器,并在接收事件时打印接收到的数据。 **2. vuex 状态管理** - 组件 `2.vue` 使用 `Vuex` 注册一个 store。 - `store` 中定义了一个 `state` 对象,包含应用的初始状态。 - `store` 提供了 `mutations` 对象,用于处理状态变更。 **3. localStorage 存储数据** - 组件 `3` 使用 `localStorage` 将数据存储到本地。 - 组件 `B` 中通过 `getItem` 方法从 `localStorage` 中获取数据,并将其赋值给 `player` 属性。 - 组件 `A` 中使用 `setItem` 方法将数据存储到 `localStorage` 中,并在组件已渲染完成后删除该数据。

正文

好家伙,

 

先说一下我的需求,我要组件间传值

 

1.eventBus

前端兄弟组件传值eventbus无法使用

不报错也不触发,就很奇怪

//eventBus.js

import Vue from "vue";

export default new Vue();


//Mylogin.vue

<button type="button" class="btn btn-primary" @click="login">登录</button>

import bus from '../js/eventBus'

methods: {
    login() {
    bus.$emit('getLoginName', this.loginForm)
}

//Game.vue
import bus from '../js/eventBus'
  mounted() {
    bus.$on('getLoginName', (data) => {
    console.log("这是接收到的数据:", data)
    })
}

 

 

试试vuex了

2.vuex

2.1.什么是Vuex?

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。

它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。

(我把它理解为一个状态管理器)

 

2.2.Vuex的安装

npm install vuex --save

main.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)
const store = new Vuex.Store({
  state: {
    count: 0,
    user: {
      id: '',
      password: '',
      life: null,
      score: null,
      loginName: null
    },
  },
  mutations: {
    increment(state) {
      state.count++
    }
  }
})

export default store;

new Vue({
  store: store,
}).$mount('#app')

 

Vuex 使用单一状态树——是的,用一个对象就包含了全部的应用层级状态。至此它便作为一个“唯一数据源 ”而存在。这也意味着,每个应用将仅仅包含一个 store 实例。

 

以上代码,我们可以使用

console.log(this.$store.state.user)

访问到数据

 

3.localStorage

我们换个思路,A组件把数据存到本地,

然后B组件读取,这在某种意义上也是一种"组件传值"

 

//存数据
localStorage.setItem("getuserdata", JSON.stringify(this.player));

//取数据
JSON.parse(localStorage.getItem("getuserdata"));

//删数据
localStorage.removeItem("getuserdata");

//清除所有
localStorage.clear();

 

与我的第一个项目(十三) :组件间传值的一些方案(vuex,eventbus,localStorage)相似的内容:

我的第一个项目(十三) :组件间传值的一些方案(vuex,eventbus,localStorage)

好家伙, 先说一下我的需求,我要组件间传值 1.eventBus 前端兄弟组件传值eventbus无法使用 不报错也不触发,就很奇怪 //eventBus.js import Vue from "vue"; export default new Vue(); //Mylogin.vue

我的第一个项目(十) :处理全局变量(解决模块化后变量无法获取的问题)

好家伙, 飞机大战分包分的差不多了, 但是又出现了问题: 文件目录如下: 然而关于变量 helloworld.vue完整代码

我的第一个项目(十一) :飞机大战分包完成(简单阐述分包思路以及过程)

好家伙, 代码已开源 Git: https://gitee.com/tang-and-han-dynasties/panghu-planebattle-esm.git NPM: panghu-planebattle-esm - npm (npmjs.com) 现在,比如说,我用Vue写好了个人博客主

我的第一个项目(十二) :分数和生命值的更新(后端增删查改的"改")

好家伙,写后端,这多是一件美逝. 关于这个项目的代码前面的博客有写 我的第一个独立项目 - 随笔分类 - 养肥胖虎 - 博客园 (cnblogs.com) 现在,我们登陆进去了,我开始和敌人战斗,诶,打到一百分了,我现在要把这个分数保存起来 1.前端先把测试样例写好 随便写一个测试样例

我的第一个项目(十四) :完成数据保存功能(前端,增查改接口)

好家伙,天天拖,终于写完了 代码已开源(Gitee) PH-planewar: 个人开发的全栈小游戏 前端:vue2 + element-ui 后端: Springboot + mybatis-plus 数据库: mysql 目前实现功能: 1.注册登陆 2.游戏数据保存 3.游戏运行 (gitee

我的第一个项目(十五) :完成数据保存功能(后端,改update)

好家伙, 代码已开源(Gitee) PH-planewar: 个人开发的全栈小游戏 前端:vue2 + element-ui 后端: Springboot + mybatis-plus 数据库: mysql 目前实现功能: 1.注册登陆 2.游戏数据保存 3.游戏运行 (gitee.com) 后端这

前后端分离项目(十):实现"改"功能(前后端)

好家伙,本篇介绍如何实现"改" 我们先来看看效果吧 (这可不是假数据哟,这是真数据哟) (忘记录鼠标了,这里是点了一下刷新) First Of All 我们依旧先来理一下思路: 首先在"管理"页面中,我能看到所有的书本信息, 随后,在每一个信息后都有对应的"修改按钮" 当我点击这个按钮时,我要①拿到

我的第一个项目(二):使用Vue做一个登录注册界面

好家伙, 顶不住了,太多的bug, 本来是想把背景用canvas做成动态的,但是,出现了各种问题 为了不耽误进度,我们先把一个简单的登录注册界面做出来 来看看效果: (看上去还不错) 本界面使用Vue2(新建项目的时候记得把less勾上,项目里有用到) 1.项目目录: 2.MyLogin.vue组件

我的第一个项目(三):注册登陆功能(后端)

好家伙,前端出了点bug 我们来搞定后端先: 后端我们用的框架是Spring boot 数据库:MySQl 代码已开源,连接在最后 新建项目: 只点Java Web 项目目录如下: 1.首先,我们在pom.xml文件中导入第三方包: web服务,mysql连接驱动等一系列包 pom.xml文件: <

我的第一个项目(四):(前端)发送请求以及表单校验

好家伙,本篇将继续完善前端界面 效果展示: 1.注册登陆 (后端已启动) 2.注册表单验证 (前端实现的表单验证) 在此之前: 我的第一个项目(二):使用Vue做一个登录注册界面 - 养肥胖虎 - 博客园 (cnblogs.com) 后端部分: 我的第一个项目(三):注册登陆功能(后端) - 养肥胖