that is, two independent routes correspond to two independent components, two components that are neither father and son nor sibling, the browser opens two routes to add data to the b component, and then wants to update the data in component a when Synchronize responds to the updated data, but my code component a does not respond.
the browser and eslint do not report that someone else is running my code and saying that it can be updated, but I But not on my own computer. I manually changed the data in state, component a was updated, but the data component an added through component b was not updated. I added console.log (state.list) to the ADD of mutation and was able to output the latest data in component b every time I added data to component b, but component a just didn"t respond for two days, just didn"t solve this question. I packed the src directory and put it in Baidu Cloud. Can you help me see what the problem is? is it a code problem or something else? thank you
Baidu Cloud
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)
console.log(state.list)
}
},
actions: {
add (context, msg) {
context.commit("ADD", msg)
}
}
})
export default store