vue.js中如何將數據從組件傳遞到遠組件 3

Question

我找不到將數據從組件傳遞到 vue 中的非子組件的方法。 我正在使用刀片文件，並且有一個組件可以在暗模式和亮模式之間切換。 我希望我的深色徽標顯示深色和淺色徽標以顯示淺色。 問題是提供/注入無法解決我在 Vue 開發工具中看到的問題，即提供了我的值，但是當我檢查其他組件時，注入的值未定義。 我之前在下拉組件中做過，我能夠傳遞值，因為它是關於一個父組件及其子組件，但現在我不能這樣做。

我需要一種方法將數據從我的 Switchdark.vue 組件傳遞到 Svglodark.vue 組件。

我的 Switchdark.vue

 <template> <div class="flex cursor-pointer items-center justify-between" @click="modeToggle" > <div class="flex h-4 w-12 items-center rounded-full bg-gray-300 p-1 duration-300 ease-in-out":class="{ 'bg-green-400': toggleActive }" > <div class="h-3 w-3 transform rounded-full bg-white shadow-md duration-300 ease-in-out":class="{ 'translate-x-7': toggleActive }" ></div> </div> </div> </template> <script> import { provide, ref } from "vue"; import Svglogodark from "./Svglogodark.vue"; export default { components: [Svglogodark], props: ["theme"], data() { return { toggleActive: false, }; }, mounted() { if (this.theme === "false") { this.light(); } else { this.dark(); } }, methods: { dark() { document.querySelector("body").classList.add("dark"); this.toggleActive = true; this.$emit("dark"); }, light() { document.querySelector("body").classList.remove("dark"); this.toggleActive = false; this.$emit("light"); }, modeToggle() { if ( this.darkMode || document.querySelector("body").classList.contains("dark") ) { this.light(); } else { this.dark(); } const isDarkModeOn = this.toggleActive; createCookie("isDarkModeOn", isDarkModeOn.toString(), 60 * 60 * 24); }, }, setup() { const toggleActive = ref(toggleActive); provide("toggleActive", toggleActive); return { toggleActive, }; }, }; </script> <style></style>

我的 Svglodark.vue：

 <template> <svg v-if="toggleActive" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="170" height="70" viewBox="0 0 4792 1625" > </svg> </template> <script> export default { inject: ["toggleActive"], created() { console.log(this.toggleActive); }, }; </script> <style></style>

我將有兩個 SVG，我希望它們顯示我是否處於黑暗模式。

Answer 1

使用vuex這里可以了解一下。 vuex 文檔

或者

您可以使用簡單的方法，即LocalStorage

\\store item
localStorage.setItem('theme', 'dark');

\\you can get anywhere
var theme = localStorage.getItem('theme');

console.log(theme); //'dark'