0👍
There must be something else going on because it works as expected.
Below is almost same code (changes only to make it work from CDN and not require API)
Only strange thing I noticed was you have both template
and render
function on your root instance…but it works as If render function is present in the Vue option, the template will be ignored. Docs
Vue.use(Vuex)
const contacts = {
namespaced: true,
state : {
type: 'external',
externalList: [1, 2, 3],
internalList: [4, 5, 6]
},
mutations:{
setContactList (state, list) {
state.type === 'external' ? state.externalList = list : state.internalList = list
},
setType (state, type) {
state.type = type
}
},
getters:{
displayList (state) {
if (state.type === 'external') {
return state.externalList
} else {
return state.internalList
}
}
},
actions:{
loadContacts ({ commit, state }, payload) {
// to simulate Ajax loading...
setTimeout(() => (commit('setContactList', [7, 8, 9])), 1500)
}
}
}
const store = new Vuex.Store({
modules: {
contacts
}
})
const list = Vue.component('List', {
props: {
url: {
required: true,
type: String
},
filter: {
type: Boolean,
default: false
},
pageSize: {
type: Number,
default: 200
},
type: {
type: String,
default: 'external'
}
},
template: `
<div>
<div v-for="(data) in displayList"> {{ data }}</div>
</div>
`,
computed: {
...Vuex.mapGetters('contacts', ['displayList']),
},
mounted () {
this.setType(this.type)
this.loadData()
},
methods: {
...Vuex.mapActions('contacts', ['loadContacts', 'updateStatus']),
...Vuex.mapMutations('contacts', ['setType']),
loadData () {
this.loadContacts()
}
}
})
const app = new Vue({
store,
components: { list },
template: `<List :url="url" />`,
render (h) {
return h('List', { props: { url: this.url, filter: this.filter, type: 'internal' } })
},
data () {
return {
url: "some url",
filter: true
}
},
})
app.$mount("#app")
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vuex/3.5.1/vuex.min.js"></script>
<div id="app"> </div>
- [Vuejs]-VueJS user mounted() on new click/reset component state?
- [Vuejs]-Add a Dynamically added field inside a dynamically added field in vue js?
-1👍
your state should contains keys (ADDED BY YOUR HANDS) you wanna to be synchronized.
Basically you should write your actual structure of all keys you wanna to be synchronized.
for example keys (added by you) = "reactivity" is working:
state:{
externalList: null, // <--- added by you
internalList: null // <--- added by you
}
for example "reactivity" is NOT working:
state: {} // <--- externalList/internalList NOT added by you
in mutation
...
state.externalList = "hello"; // <--- not synchronized
...
- [Vuejs]-Vuejs Displaying a component multiple times with Axios in it
- [Vuejs]-How we can reverse and remove the same message with to different buttons with VueJS?
Source:stackexchange.com