带组件的Vuex只更新一种方式

Question

设置

我有一个超级简单的测试应用程序，包含两个组件（<h1>和<input>）和一个vuex数据存储。 <input.与pageTitle绑定到商店数据元素v-model，<h1>使用双括号显示pageTitle。当我更改输入字段中的文本时，商店和所有组件中的值都会更改（我可以在开发工具中看到）。

问题

但是，当我直接在控制台中更改商店中的值时（使用store.state.pageTitle = 'something else'，<h1>会更新，但文本字段中的值会不。但是，在初始页面加载时，使用商店中的数据正确填充输入。我猜它没有从商店接收更新。

问题

为什么我的输入字段没有从商店接收更新并更新它的值？

代码

的Javascript

const store = new Vuex.Store({
    state: {
        pageTitle: "My Vuex Thing"
    },
    mutations: {
        pageTitle(state,title){
            state.pageTitle = title;
        }
    }
});

const topsection = {
    template: `<h1>{{ pageTitle }}</h1>`,
    computed: {
        pageTitle(){
            return store.state.pageTitle;
        }
    }
};
const contentsection = {
    template: `<div id="content">
        Enter a page title: <input type="text" name="pageTitle" v-model="pageTitle">
    </div>
    `,
    computed: {
        pageTitle(){
            return store.state.pageTitle;
        }
    },
    watch: {
        pageTitle(val){
            store.commit('pageTitle',val);
        },
    }
};


var v = new Vue({
    el: '#vue',
    store,
    components: {
        topsection,
        contentsection
    }
});

HTML

<div id="vue">
    <topsection></topsection>
    <contentsection></contentsection>
</div><!-- #vue -->

Answer 1

您正在使用v-model="pageTitle"，其中pageTitle是计算属性。默认情况下，计算属性是getter-only，但您尝试使用v-model绑定值。

所以你需要的是computed setter。

所以 contentsection 组件应该是这样的：

const contentsection = {
    template: `<div id="content">
        Enter a page title: <input type="text" name="pageTitle" v-model="pageTitle">
    </div>
    `,
    computed: {
        pageTitle:{
            get: function(){
                return store.state.pageTitle;
            },
            set: function(newTitle){
                store.commit('pageTitle',newTitle);
            }
        }
    }
}; 

您不需要观察者。

这是工作jsFiddle