我想通过mapState
分配setter方法。我目前使用一种解决方法,我将我感兴趣的变量(todo
)命名为临时名称(storetodo
),然后在另一个计算变量todo
中引用它。
methods: {
...mapMutations([
'clearTodo',
'updateTodo'
])
},
computed: {
...mapState({
storetodo: state => state.todos.todo
}),
todo: {
get () { return this.storetodo},
set (value) { this.updateTodo(value) }
}
}
我想跳过额外的步骤,直接在mapState
内定义getter,setter。
我为什么要这样做?
正常方法是使用mapMutations
/ mapActions
& mapState
/ mapGetters
没有我上面说明的计算的get / set组合,并直接在HTML中引用变异:
<input v-model='todo' v-on:keyup.stop='updateTodo($event.target.value)' />
getter / setter版本允许我简单地写:
<input v-model='todo' />
答案 0 :(得分:12)
您无法在mapState
您可以尝试直接返回get()
中的状态并从计算属性中删除mapState
computed: {
todo: {
get () { return this.$store.state.todos.todo},
set (value) { this.updateTodo(value) }
}
}
以下是相关但不相同的JsFiddle example
答案 1 :(得分:1)
这是我目前的解决方法。复制自我的个人工作项目
// in some utils/vuex.js file
export const mapSetter = (state, setters = {}) => (
Object.keys(state).reduce((acc, stateName) => {
acc[stateName] = {
get: state[stateName],
};
// check if setter exists
if (setters[stateName]) {
acc[stateName].set = setters[stateName];
}
return acc;
}, {})
);
在component.vue文件中
import { mapSetter } from 'path/to/utils/vuex.js';
export default {
name: 'ComponentName',
computed: {
...mapSetter(
mapState({
result: ({ ITEMS }) => ITEMS.result,
total: ({ ITEMS }) => ITEMS.total,
current: ({ ITEMS }) => ITEMS.page,
limit: ({ ITEMS }) => ITEMS.limit,
}),
{
limit(payload) {
this.$store.dispatch({ type: TYPES.SET_LIMIT, payload });
},
},
)
},
}
现在您可以使用v-model绑定。升
答案 2 :(得分:0)
使用商店mutations
的另一种方式,如下所示:
//in your component js file:
this.$store.commit('setStoretodo', storetodo)
假设您在vuex存储实例的变体中定义了setStoretodo
(无论如何建议这样做):
//in your vuex store js file:
state:{...},
actions: {...}
...
mutations: {
setStoretodo(state, val){
state.storetodo = val
},
...
}
...
这将使属性保持被动状态,因为mapState
将获取更新的值并自动呈现。
当然,这不像编写this.storetodo = newValue
那样酷,但是也许有人也会发现它很有帮助。