web-dev-qa-db-ja.com

セッターを含むmapState

mapStateを介してセッターメソッドを割り当てたいです。現在、回避策を使用して、興味のある変数（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内でゲッター、セッターを直接定義したいと思います。

なぜこれをしたいのですか？

通常のアプローチは、上記で説明した計算されたget/setの組み合わせなしでmapMutations/mapActions＆mapState/mapGettersを使用し、突然変異を参照することです。 HTMLで直接：

<input v-model='todo' v-on:keyup.stop='updateTodo($event.target.value)' />

ゲッター/セッターバージョンでは、次のように簡単に記述できます。

<input v-model='todo' />
vue.jsvuex
15
Chris

mapStateでゲッター/セッター形式を使用することはできません

試すことができるのは、get()の状態を直接返し、計算されたプロパティからmapStateを削除することです

computed: {
    todo: {
        get () { return this.$store.state.todos.todo},
        set (value) { this.updateTodo(value) }
    }
}

関連するものの、同じではありません JsFiddleの例

14
Vamsi Krishna

これが私の現在の回避策です。個人の作業プロジェクトからコピー

// 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バインディングを使用できます。 l

1
Kharel

次のようにstore 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を書くことほどクールではありませんが、誰かが同様に役立つと思うかもしれません。

0
vir us