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

2023-05-23 18:04:34 来源：博客园

好家伙，

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

(资料图)

1.eventBus

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

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

//eventBus.jsimport Vue from "vue";export default new Vue();//Mylogin.vueimport 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();

关键词：