前提・実現したいこと
現在Vue(Nuxt)でvuexのstateの変更をvueコンポーネントで監視して、stateの状態に応じて対応するメソッドを発火させようとしています。
以下に現状のコードを記載させていただきましたが、stateの変更を監視するためにcomputed
に...mapGetters
を加えたところ、以下のようなエラーが発生してしまっています。
自分でも調べてみましたが、解決方法がわからないためアドバイスいただけますでしょうか。
発生している問題・エラーメッセージ
...mapGetters
を追記したところ、以下のようなエラーが発生しています。
[Vue warn]: Computed property "entered" was assigned to but it has no setter.
TypeError: Cannot read property 'entered' of undefined
該当のソースコード
vue
1<template> 2 <section class="sample"> 3 <h2>サンプルページ</h2> 4 </section> 5</template> 6 7<script> 8import { mapGetters, mapMutations } from "vuex"; 9 10export default { 11 data() { 12 return {}; 13 }, 14 // 以下computedとwatchでstateの変更を監視 15 computed: { 16 ...mapGetters({ 17 entered: "entered" 18 }) 19 }, 20 watch: { 21 entered(val) { 22 this.flash(); 23 val ? this.enter() : this.leave(); 24 } 25 }, 26 mounted() { 27 // 以下store/index.js内のmutationを発火 28 this.entered(); 29 }, 30 methods: { 31 ...mapMutations({ 32 // this.entered()にマッピング 33 entered: "entered" 34 }), 35 flash() { 36 console.log("flash"); 37 }, 38 enter() { 39 console.log("enter"); 40 }, 41 leave() { 42 console.log("leave"); 43 } 44 } 45}; 46</script> 47 48<style scoped lang="scss"> 49/*スタイルは省略*/ 50</style> 51
store/index.js
javascript
1export const state = () => ({ 2 entered: false 3}); 4 5export const getters = { 6 entered: state => state.entered 7}; 8 9export const mutations = { 10 entered(state) { 11 state.entered = !state.entered; 12 } 13}; 14
補足情報(FW/ツールのバージョンなど)
"nuxt": "^2.4.0",
回答1件
あなたの回答
tips
プレビュー