vuexはインストール済みとする。
インストールしていない人はこちらの記事を参照。
vuexの設定
//プロジェクトディレクトリ/resources/js/store/index.js
//中略
state: {
value: "aaaa",
},
getters: {
getValue(state) {
return state.value
}
},
mutations: {
updateValue(state, value) {
state.value = value
},
}
//中略
Vueファイルの設定
//プロジェクトディレクトリ\resources\js\components\page\Hoge.vue
<template>
<div>
{{getValue}}
<button @click="change">vuexの値チェンジ</button>
</div>
</template>
<script>
export default {
computed: {
//vuexのstateの中身をcomputedにより監視
getValue() {
return this.$store.getters.getValue;
}
},
methods:{
change(){
this.$store.commit("updateValue", 'iiii'); //vuexの関数を呼び出す
},
}
}
</script>
[vuexの値チェンジ]ボタンを押すと、aaaaがiiiiに変わる。