vue 之更新了vuex store里面的 数据后 界面视图没有同步更新(动态数据)

store  state

/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 里面才能同步更新视图

 

ps：写的不对的希望大家指出来，谢谢大佬！结论只是我目前现象看来的，具体的还有待深入测试