vuex计算的属性不是反应性的？
vuex计算的属性不是反应性的？
提问于 2018-08-28 01:17:11
test.vue，'test'属性在vue组件中是反应性的，但是当我更改第一个输入标签的值时，来自vuex store的'title'属性不是被动的。我发现了一些类似的问题，但解决方案对我不起作用。我在哪里做错了？
模板
<div class="title">
<input
type="text"
placeholder="palceholder"
v-model="title"
/>
</div>
<input v-model="test"/>
<div>{{test}}</div>
<div>
{{title}}
</div>
JS
data() {
test: 'test'
},
computed: {
...mapGetters(['article']),
title: {
get () {
return this.article.title || ''
},
set (value) { this.$store.commit(Types.UPDATE_TITLE, value) }
}
}
store.js
import * as Types from '../mutation-types'
import Vue from 'vue'
const state = {
article: {}
}
const getters = {
article: state => state.article
}
const mutations = {
[Types.UPDATE_TITLE] (state, title) {
state.article = { ...state.article, title }
}
}
回答 1
Stack Overflow用户
发布于 2018-08-28 10:54:27
通过使用此库，可以简化此任务解决方案并减少代码占用：
https://github.com/yarsky-tgz/vuex-dot
<template>
<form>
<input v-model="title"/>
<input v-model="content"/>
</form>
</template>
<script>
import { takeState } from 'vuex-dot';
export default {
computed: {
...takeState('article')
.expose(['title', 'content'])
.commit('editArticle')
.map()
}
}
</script>store
export default new Vuex.Store({
state: {
article: {
title: 'Mars attacks!!!',
content: 'All is in on fire'
}
},
mutations: {
editArticle(state, patch) {
state.article = Object.assign({}, state.article, patch);
}
}
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/-100005023
复制相关文章
相似问题