I want to submit data in component B and then respond to updates in component A. I opened both an and b pages at the same time to observe, but after trying b, a did not respond and did not report anything wrong. why? In mutations"s ADD, alert (state.list) pops up the latest data every time I add it, but component A just doesn"t update the
directory structure
A component
<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>
component 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
