vue:vuex store里面的数据更新后，如何在页面同步更新

/detail/index.js

const state = {
    id:0,
    playUrl:'b'
};
const getters = {};
const actions = {};
const mutations = {
    setPlayUrl(state,url){
        state.playUrl = url;
        // state.url = url;
    }
};
export default {
    namespaced: true,
    state,
    getters,
    actions,
    mutations

index.js

import Vue from 'vue';
import Vuex from 'vuex';
import Detail from './songDetail/index'
 
 
Vue.use(Vuex);
 
const state = {};
const actions = {};
const mutations = {};
const store = new Vuex.Store({
    modules: {
        detail:Detail
    },
    actions,
    state,
    mutations
});
export default store;

pageA:

触发mutation：

_this.$store.commit('detail/setPlayUrl',data.data.data);//存vuex
 

pageB:

展示数据：

刚开始是没有放到computed 里面的（被我注释掉的部分） 视图没有同步更新 后来改成来以上代码就可以更新啦

结论：

1.本组件内data的数据和prop传递过来的数据能同步双向绑定和更新视图

2.vuex 中store的数据需要放到computed 里面才能同步更新视图

转自：https://blog.csdn.net/wangshang1320/article/details/98871252