Vuexで登録したObjectを参照した際に同等のObjectを取得したい
Vuexを使用しObjectを参照した際に、元のObjectと同等のObjectを返さずに困っています。
該当のソースコード
src/views/Home.vue
vue
1<script> 2export default { 3 mounted () { 4 const obj = { key1: 'aaaAAA', key2: 3 } 5 console.log('obj: ', obj) 6 7 this.$store.commit('setObject', obj) 8 console.log('vuex testObject: ', this.$store.state.testObject) 9 } 10} 11</script>
src/store/index.js
javascript
1import Vue from 'vue' 2import Vuex from 'vuex' 3 4Vue.use(Vuex) 5 6export default new Vuex.Store({ 7 state: { 8 testObject: {} 9 }, 10 mutations: { 11 setObject(state, payload) { 12 state.testObject = payload; 13 } 14 }, 15 modules: { 16 } 17}) 18
実行結果
コンソールの出力結果です。
Home.vue
の mounted
内の obj
変数は Object { key1: "aaaAAA", key2: 3 }
を返しますが、一度vuexを経由するとvalueが Getter & Setter
になってしまいます。
this.$store.state.testObject
で取得したObjectに対し、何かしらの処理を行うことで Getter & Setter
から元の値が直接入っている状態に戻すことは可能でしょうか?
補足情報(FW/ツールのバージョンなど)
name | version |
---|---|
FireFox | Windows版 87.0 (64 ビット) |
Vue.js | 2.6.12 |
Vuex | 3.6.2 |
Vue Router | 3.5.1 |
Vuetify | 2.4.8 |
あなたの回答
tips
プレビュー