Vuex 不适用于不同的组件

Question

我有一个 Vue 应用程序的结构： App.vue -> 路由器视图（有两个子组件）

App.vue

<template>
  <div id="app" @click="mutateStore(null)">
    <router-view @storeUpdate="mutateStore"/>
  </div>
</template>

<script>
export default {
  name: 'app',
  methods:{
    mutateStore(){     
      this.$store.commit('increment')
    }
  },
  mounted(){
    this.$store.commit('increment')
  }
}
</script>

<style>
...styles
</style>

main.js

import Vue from 'vue'
import App from './App'
import router from './router'
import Vuex from 'vuex'
Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    type: 1
  },
  mutations: {
    increment (state) {
      state.type++
    }
  }
})

new Vue({
  el: '#app',
  router, 
  store,   
  render: h => h(App)
})

router/index.js

import Vue from 'vue'
import Router from 'vue-router'
import Main from '@/components/Childcomponent1'
import Display from '@/components/Childcomponent2'
Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Childcomponent1',
      component: Main
    },
    {
      path: '/display',
      name: 'Childcomponent2',
      component: Display
    }
  ]
})

在子组件 1 中，我有一个按钮，如果单击该按钮将执行以下操作：

this.$emit("storeUpdate")

这会触发 App.vue 中的事件处理程序 mutateStore() 在 Vue Dev Tools 中，它还显示 state.type 和增量值

在子组件 2 中，我直接显示 state.type 计算值：

<template>
 <div class="main">
    {{type}}
 </div>
</template>

<script>
export default {
  name: 'Childcomponent2',
  computed: {
    type () {
      return this.$store.state.type
    }
  }
}
</script>

<style scoped>
..Styles
</style>

但是子组件 2 中的值从未更新过，即使在 Vue Dev Tools 中查看也没有。

还有一个奇怪的观察，当在 mounted() 中调用 App.vue 中的相同提交时，它会在两个子组件中递增 state.type，但是当通过方法 mutateStore() 时，它确实在子组件 1 中更新，但在子组件 2 中未检测到更改。

请注意，在我执行 App.vue 中的 emit/event 处理程序部分之前，我已经尝试直接从子组件中改变商店，但没有效果，这就是我尝试 emit 事件处理程序的原因相反。

我是不是做错了什么？

请帮忙！

Answer 1

找到了。事实证明，我错误地认为 Vuex 标准已经内置了对使用 localStorage 的跨多个浏览器 windows 的共享状态的支持。显然它只在同一个浏览器中跨多个组件共享状态 tab/window。要允许多个浏览器支持，必须添加一个插件：vuex-shared-mutations

npm install vuex-shared-mutations

Vuex 不适用于不同的组件

Vuex not working with different components

state

store

vue-router

vuex