vuexメソッド mapActionsを使いたいです。そして引数をセットしたいです。
vuexメソッド mapActionsを実装したいのですが、調べて実践してみましたが、エラーが出てしまい正しく実装できませんでした。
mapActionsを使うに、前正常に動くソースを記します。
###index.vue
<template> <section class="container posts-page"> <div slot="header" class="clearfix"> <time>{{ msg }}</time> <v-text-field label="ユーザーID" v-model="payload.id" ></v-text-field> </div> <v-btn color="success" @click="register()">新規ID作成</v-btn> <transition name="fade" mode="out-in"> <div v-if="users"> <h2>usersId一覧</h2> <p>【{{ users }}】さん</p> </div> </transition> </section> </template> <script> import { mapGetters,mapActions } from "vuex"; export default { asyncData() { return { msg: "新しくユーザを追加することができます", payload: { id: null } }; }, methods: { async register() { await this.$store.dispatch("users/register", { ...this.payload }); this.payload.id = null; //this.$router.push("/posts/"); } }, computed: { ...mapGetters("users", ["users"]) } }; </script>
###vuexの記述
store/users.js
js
1export const state = () => ({ 2 isLoggedIn: false, 3 users: null 4}) 5 6export const getters = { 7 isLoggedIn: state => state.isLoggedIn, 8 users: state => state.users 9 10} 11 12export const mutations = { 13 setUsers(state, users) { 14 //console.log(users) 15 state.isLoggedIn = true 16 state.users = users 17 }, 18} 19 20export const actions = { 21 async register({ commit }, payload) { 22 //console.log(users) 23 const users = payload.id 24 commit('setUsers', users) 25 } 26}
この2ファイルで目的としている動きは実装出来ておりました。
これからはより効率的で可読性があるものにしたく、mapActionsを使ってみます。
###mapActionsに書き換えたソース
index.vueファイルのscript文だけ抜粋します。
<script> import { mapGetters,mapActions } from "vuex"; export default { asyncData() { return { msg: "新しくユーザを追加することができます", payload: { id: null } }; }, methods: { ...mapActions('users',['register']) this.register(this.payload) this.payload.id = null }, computed: { ...mapGetters("users", ["users"]) } }; </script>
##vuexのissueで解決策と思われる記事を発見、試してみましたが・・・
vuexのissueで同じような悩みを持った人がいましたのでこれのとおり実装しました。
しかしerrorでした。
vuexのissue
実現したいことまとめ
- mapActionsを使いたい。
- 対応するActionsのメソッドregisterに引数としてpayload値を持たせて、dispatchしてほしい。
- dispatchが完了後に、payload値をnullにしたいです。この場合はasync awaitを使って実装するべきなのでしょうか。非同期についてあまり詳しくなく、もしawaitさせるべきでしたらさせたいです。
vue,vuexに詳しい方がいらっしゃいましたらお手数ではご教示をお願い致します。
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/11/13 05:23 編集
2018/11/13 05:43
2018/11/13 06:04
2018/11/13 06:11