該当ソースコード
問題: v-btnの@clickに以下のメソッドを結び付けて発火すると
typescript
1 public setMock() { 2 // オブジェクトのコピー(代入だと参照渡しになるため。) 3 this.mockNumber++; 4 const m = deviceDataMock; 5 m.ipAddress = `192.168.0.${this.mockNumber}`; 6 vxm.devices.SET_DEVICE_DATA(m); 7}
下記のエラーが発生する。
Error: [vuex] do not mutate vuex store state outside mutation handlers.
store/index.tsは以下の定義になっている
typescript
1import { 2 action, 3 getter, 4 Module, 5 mutation, 6 VuexModule 7} from 'vuex-class-component'; 8import Vuex from 'vuex'; 9import Vue from 'vue'; 10import { DeviceData, DeviceDataState } from '../types'; 11import { deepCopy } from '@/utilities'; 12 13Vue.use(Vuex); 14// いつか消したい 15export const strict = false; 16 17// for TS1219 18@Module({ namespacedPath: 'devices/', target: 'nuxt' }) 19// @ts-ignore 20export class DeviceDataStore extends VuexModule implements DeviceDataState { 21 // @ts-ignore 22 @getter deviceData: DeviceData[] = []; 23 @getter deviceMap = new Map(); 24 25 @mutation 26 public SET_DEVICE_DATA(payload: DeviceData) { 27 this.deviceData.push(deepCopy(payload)); 28 this.deviceMap.set(deepCopy(payload).ipAddress, deepCopy(payload)); 29 } 30 31 @mutation 32 public CHANGE_DEVICE_DATA(payload: DeviceData[]) { 33 this.deviceData = payload; 34 this.deviceMap.clear(); 35 this.deviceData.forEach((v) => this.deviceMap.set(v.ipAddress, v)); 36 } 37 38 @action({}) 39 // @ts-ignore 40 public initialize() { 41 // actions内で簡単にthisからmutationを呼び出せる。 42 this.CHANGE_DEVICE_DATA([]); 43 this.deviceMap.clear(); 44 } 45} 46 47const store = new Vuex.Store({ 48 modules: { 49 devices: DeviceDataStore.ExtractVuexModule(DeviceDataStore) 50 } 51}); 52 53export default DeviceDataStore.ExtractVuexModule(DeviceDataStore); 54 55export const vxm = { 56 devices: DeviceDataStore.CreateProxy(store, DeviceDataStore) 57}; 58
また、types/index.tsは以下のようになっている
export interface Item { icon: string; title: string; to: string; } export interface DeviceData { ezRequesterModels: EzRequesterModel[]; deviceType: DeviceTypes; ipAddress: string; hostname: string; description: string; } export interface DeviceDataState { deviceData: DeviceData[]; } export interface EzRequesterModel { protocol: RequestTypes; protocolModel: string; parameterModel: string; } export enum DeviceTypes { RaspberryPi3BPlus = 'Raspberry Pi 3B+', RaspberryPiZero = 'Raspberry Pi zero W (WH)', Etc = 'Etc' } export enum RequestTypes { HTTP = 'http', HTTPS = 'https' }
mocks/index.tsは下記の通り
import { DeviceData, DeviceTypes, RequestTypes } from '../types'; export const deviceDataMock: DeviceData = { ezRequesterModels: [ { protocol: RequestTypes.HTTP, protocolModel: 'http', parameterModel: 'hogehoge?exam=hoge' }, { protocol: RequestTypes.HTTPS, protocolModel: 'https', parameterModel: 'hogehoges?exams=hoges' } ], deviceType: DeviceTypes.Etc, ipAddress: '192.168.0.xxx', hostname: 'example.local', description: 'The Woodman set to work at once, and so sharp was his axe that the tree was soon chopped nearly through.' };
また、deepcopyされていないのが原因だと思い、以下の関数を使用しているが変化はなかった
export const deepCopy = <T>(target: T): T => { if (target === null) { return target; } if (target instanceof Date) { return new Date(target.getTime()) as any; } if (Array.isArray(target)) { const cp = [] as any[]; (target as any[]).forEach((v) => { cp.push(v); }); return cp.map((n: any) => deepCopy<any>(n)) as any; } if (typeof target === 'object' && target !== {}) { const cp = { ...(target as { [key: string]: any }) } as { [key: string]: any; }; Object.keys(cp).forEach((k) => { cp[k] = deepCopy<any>(cp[k]); }); return cp as T; } return target; };
試したこと(全てダメだった)
- スプレッド演算子を使用してみる
- deepcopy()を使ってみる(上記のもの)
- 新たに定義してみる
{ ezRequesterModels: [ { protocol: RequestTypes.HTTP, protocolModel: 'http', parameterModel: 'hogehoge?exam=hoge' }, { protocol: RequestTypes.HTTPS, protocolModel: 'https', parameterModel: 'hogehoges?exams=hoges' } ], deviceType: DeviceTypes.Etc, ipAddress: '192.168.0.xxx', hostname: 'example.local', description: 'The Woodman set to work at once, and so sharp was his axe that the tree was soon chopped nearly through.' };
☝️これをそのまま代入してみてもエラーになってしまう。
気になること
- Home画面には反映されているので保存はされているみたいである。
しばらく調べていたのですがどうやっても手掛かりがつかめず、ここに質問させて頂きました。
どなたか提案や解決法をご存知の方いらしたら教えていただきたいです。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。