Vue，正在尋找一種方法來觀察來自不同組件/js 文件的值/更改

Question

所以我有一個簡單的 js 文件，其中包含一些類似函數的東西，其中之一是 function，它從 1.localstorage 如果不存在 2.vuex 如果不存在使用默認值。 這些值可以通過整個應用程序在幾個組件中更新，這意味着也使用此值的組件不需要更新此值。 現在我似乎無法讓這部分反應。

助手.js

export const helperFunc = () => {
    let value
    //dummy
    if(checkforlocalstorage){
       value = localstorage_value
    } else {
       value = other_value
    }

    return value       
}

組件一.vue

<template>
   <div>{{dynamicValue}}</div>
</template>
<script>
import {helperFunc} from './plugins/helpers.js'
export default {
    data () {
        return {
        }
    },
    computed: {
        dynamicValue : function () {           
            return helperFunc()
        }
    },
}
<script>

ComponentTwo.vue ComponentThree.vue

在此處更新值

Answer 1

本地或 session 存儲不是反應數據，vue 無法觀看它們。 所以你最好在 vuex 存儲中設置變量，這樣數據是反應性的，所有組件都可以從應用程序的任何地方訪問它。

但是你可能會遇到一個問題，那就是如果你刷新頁面，存儲中的所有數據都會丟失，你會得到初始值。

但是你可以做一件事，那就是：

1. 將變量保存在localStorage中，即使在頁面刷新后也可以使用它
2. 初始化存儲 state 值以使數據具有反應性並通過應用程序訪問
3. 更新state和localStorage每次數據更改，這樣您就可以在頁面重新加載時獲得反應性和最新值。

在這里，我向您展示了這個想法的基本原理：

首先，您需要使用正確的state 、 mutation和action設置存儲文件：

export default {
  state() {
    return {
      myVar: 'test',
    }
  },

  mutations: {
    UPDATE_MY_VAR(state, value) {
      state.myVar = value;
    }
  },

  actions: {
    updateMyVar({ commit }, value) {
      localStorage.setItem('myVar', value);
      commit('UPDATE_MY_VAR', value);
    },
    initializeMyVar({ commit }) {
      const value = localStorage.getItem('myVar');
      commit('UPDATE_MY_VAR', value);
    }
  }
}

然后在應用程序根組件的beforeCreate或created鈎子中，您將擁有：

created() {
  this.$store.dispatch('initializeMyVar');
}

此操作從 localStorage 讀取數據並初始化myVar state，您可以在任何地方訪問該表單，例如$store.state.myVar ，這是反應性的，可以觀看。 此外，如果沒有 localStorage 並且您需要回退，您可以為此編寫適當的邏輯。

然后，每當需要更改數據時，您都可以使用第二個操作，例如$store.dispatch('updateMyVar', newUpdatedValue) ，它同時更新localStorage和state 。

現在，即使重新加載頁面，您也可以從localStorage獲得最新值，然后重復該過程。