vuex的state变化后视图没有更新

Question

就是两个独立的路由分别对应两个独立的组件 两个组件不是父子也不是兄弟关系 浏览器分别打开两个路由 在b组件中添加数据 然后想在a组件中同步响应更新数据 但是我的代码a组件却没有反应
浏览器和eslint都没有报错 别人运行我的代码说可以更新 但是我在自己电脑上却不行 我手动改state里面的数据a组件有更新 但是通过b组件添加的数据a组件却没有更新 我在mutation的ADD里面加上console.log(state.list)每次在b组件中添加数据后也能在b组件中输出最新的数据 但是a组件就是没有任何反应 弄了两天了就是没有解决这个问题 换了浏览器试了也不行 我把src目录打包放到百度云了 大家能帮我看看是哪里的问题吗 是代码问题还是其它方面的问题 谢谢
百度云

A组件

<template>
   <div>
     <ul>
       <li v-for="(item, index) in list" :key="index">{{item}}</li>
     </ul>
   </div>
</template>

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

<style scoped>
</style>

B组件

<template>
  <div>
    <input type="text" v-model="msg">
    <button @click="add">添加</button>
  </div>
</template>

<script>
export default {
  name: 'B',
  data () {
    return {
      msg: ''
    }
  },
  methods: {
    add () {
      this.$store.dispatch('add', this.msg)
    }
  }
}
</script>

<style scoped>
</style>

store.js

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    list: ['a', 'b']
  },

  mutations: {
    ADD (state, msg) {
      state.list.push(msg)
      console.log(state.list)
    }
  },

  actions: {
    add (context, msg) {
      context.commit('ADD', msg)
    }
  }
})

export default store

Answer 1

这已经跨页面了，store只能在同一页面共享的哦

Answer 2

不应该用dispatch，应该用commit吧
试试呢

Answer 3

看我代码吗 看看有没有帮助 https://pan.baidu.com/s/1-R0m...

Answer 4

你的意思是打开两个窗口吗，你想让两个窗口之间通信吗，这是两个完全独立不相干，执行的程序也是两套，没意义