如何從 Vue 商店中的 localStorage 讀取和改變狀態

Question

我有我在localStorage設置的屬性， enableLog = false 。 如果我在控制台localStorage.enableLog = true寫入，如何在我的 vuex 存儲中讀取該值並將我的狀態從false翻轉為true並觸發console.log ？

我想要做的是添加臨時控制台日志記錄。 例如，我們有一個應用程序會將數據發送到另一個應用程序，該應用程序在彈出窗口中啟動。 在彈出應用程序中，如果另一個開發人員將enableLog從false更改為true ，他/她將能夠看到通過console.logs函數發送到彈出應用程序的有效負載中的初始數據。 我的應用程序如何讀取localStorage屬性，然后如何從中更新狀態，最后重新渲染以觸發調用該console.log的函數的位置在哪里？

index.js ，狀態：

isLoggingData: false

index.js ，動作：

async init ({ state, commit, dispatch }) {
    try {
      const { data } = await messaging.send(ACTION.READY)
      commit(types.SET_LOGGING_DATA, data) // capture this initial data to be used later

index.js突變：

  [types.SET_LOGGING_DATA] (state, isLoggingData) {
    state.loggedData.initData = isLoggingData
  },

App.vue :

async created () {
    localStorage.setItem('isLoggingData', this.isLoggingData)
    await this.onCreated()

async onCreated () {
      await this.init()

我不知道如何監聽localStorage.isLoggingData的變化。

Answer 1

vuex-shared-mutations應該滿足您的需求。

Share vuex mutations across tabs via `localStorage`.