mapState与setter

时间:2017-05-30 21:40:07

标签: vue.js vuex

我想通过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' />

3 个答案:

答案 0 :(得分:12)

您无法在mapState

中使用getter / setter格式

您可以尝试直接返回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那样酷,但是也许有人也会发现它很有帮助。