//main.js import store from "./store" //追加 new Vue({ el: '#app', store, //追加 template: '<App/>', components: { App } }) //これで子コンポーネントで毎回importしなくてもthis.$storeでアクセスできる //store/index.js import Vue from "vue"; import </app/>…

vuexからvueへ値を渡す computedに書く computed: { familyName() { return this.$store.state.familyName } } mapStateによる省略記法(this.$stpre.stateを省略) store, computed: { ...mapState([ 'familyName', ]} VueとVuexの間の値の連携の仕方まだvuex…

vue.jsで親と子のやりとりは$emitやpropsで行っていた。 シンプルなうちはいいが、孫から受け取りたいとかになるとややこしくなる。 そこで、コンポーネントをまたぐ変数は別の場所に保存し、みんなそこからアクセスしてもらう。 この保存場所をstoreという…

ボタンに @click = "isActive = !isActive"項目のwrapperに v-if="isActive"外側に透明な背景で @click="isActive = false" v-if="isActive"これでボタンを押されるたびに項目が表示され 外側をクリックすると閉じる

vue.jsでの命名規則 vueファイルの名前やコンポーネント名、html内でのタグ名 などなどほとんどパスカルケースで良い。 例外 DOMテンプレートではケバブケース プロパティ名はjs内で定義はキャメルケース、html内ではケバブケース これはただの慣習に従って…