使用vuex后为什么a组件的数据没有响应更新？

Question

想在B组件中提交数据然后在A组件中可以响应更新 我同时打开a、b两个页面观察 但是试了一下b提交后a并没有反应 也没任何报错 这是为什么？我在mutations的ADD里面alert(state.list) 每次添加后都能弹出最新的数据 但是A组件就是没有更新
目录结构

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)
    }
  },

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

export default store

Answer 1

:key=index 错误

store.js

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

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

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

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

export default store

删掉其它store

演示

Answer 2

你把b组建中的dispatch换为commit试一下

Answer 3

你这数据是异步拉取的还是同步的？

Answer 4

或许你的store应该全局引入