前提・実現したいこと
vuexのstateに入っている値をgettersで取得してv-modelでデータバインディング。
ユーザーが入力欄で値を変更して決定ボタンを押すとバックエンド側に送られてデータを更新。
成功して帰ってきたjsonを基にstateを更新。
といったことがしたいです。
素のvueからNuxtへ移行したのですが、vueの時はstateの更新はされませんでした。
ご教授の程よろしくお願いいたします。
情報の不備がありましたらご教示ください。
発生している問題・エラーメッセージ
[vuex] do not mutate vuex store state outside mutation handlers.
ユーザーが入力欄を変更しようとすると上記のエラーが出て、stateの値も更新されてしまっているようです。本来は入力欄を変更し、決定ボタンを押すことでmethodsを発動させて更新したいのです。
該当のソースコード
javascript
1//edit.vue 2<template> 3 <v-form 4 ref="form" 5 v-model="valid" 6 lazy-validation 7 > 8 <v-text-field 9 v-model="myInfo.name" 10 :counter="10" 11 :rules="nameRules" 12 label="名前(フルネーム)" 13 required 14 ></v-text-field> 15 16 <v-btn 17 color="success" 18 @click="editUser" 19 > 20 登録する 21 </v-btn> 22 </v-form> 23</template> 24 25<script> 26import axios from 'axios' 27 export default { 28 29 data: () => ({ 30 myInfo: { 31 32 }, 33 authInfo: { 34 // uid: '', 35 // accessToken: '', 36 // client: '' 37 }, 38 }), 39 40 mounted() { 41 this.authInfo = this.$store.getters['myInfo/getAuthInfo'] 42 this.myInfo = this.$store.getters['myInfo/getMyInfo'] 43 }, 44 45 methods: { 46 editUser() { 47 axios.put('http://localhost:3000/api/user', this.myInfo, { 48 headers: { 49 'Content-Type': 'application/json', 50 uid: this.authInfo.uid, 51 'access-token': this.authInfo.accessToken, 52 client: this.authInfo.client, 53 }}) 54 .then((response) => { 55 this.$store.dispatch('myInfo/saveMyInfoAsUser', response.data.data) 56 }) 57 .catch((error) => { 58 console.log('登録失敗', error) 59 }) 60 } 61 }, 62 } 63</script>
javascript
1// myInfo.js 2 3export const state = () => ({ 4 myInfo: [], 5 authInfo: [], 6}) 7 8export const mutations = { 9 saveMyInfoAsUser(state, myInfo) { 10 state.myInfo = myInfo 11 }, 12 saveAuthInfo(state, authInfo) { 13 state.authInfo = authInfo 14 } 15} 16 17export const actions = { 18 saveMyInfoAsUser(context, myInfo) { 19 context.commit('saveMyInfoAsUser', myInfo) 20 } 21 , 22 saveAuthInfo(context, authInfo) { 23 context.commit('saveAuthInfo', authInfo) 24 } 25} 26 27export const getters = { 28 getAuthInfo(state) { 29 return state.authInfo 30 }, 31 getMyInfo(state) { 32 return state.myInfo 33 } 34} 35 36
試したこと
厳格モードにするとエラーは消えるみたいですが、stateの値は更新されてしまいます。
あなたの回答
tips
プレビュー