vue跨组件通信,简易状态管理的使用


参考: https://cn.vuejs.org/v2/guide/state-management.html#%E7%AE%80%E5%8D%95%E7%8A%B6%E6%80%81%E7%AE%A1%E7%90%86%E8%B5%B7%E6%AD%A5%E4%BD%BF%E7%94%A8

  • 项目结构
\---views
    Home.vue
    Son1.vue
    Son2.vue
    store.js

Home.vue




Son1.vue




Son2.vue




store.js

let store = {
    debug: true,
    state: {
        message: "Hello!"
    },

    setMessageAction(newValue) {
        if (this.debug)
            console.log("setMessageAction triggered with", newValue);
        this.state.message = newValue;
    },
    clearMessageAction() {
        if (this.debug) console.log("clearMessageAction triggered");
        this.state.message = "";
    }
};
export default store;