monteecristoo’s blog

https://twitter.com/irakaarozo

vuex

Vuex: stateの値にpayloadを使う場合の注意事項

vuex@3.1.2 Goal: shopping cart の中身を商品のIDごとに管理し、かつ各IDごとの数量を vuex stateに保持したい。また数量が1つずつではなく複数 cart に追加できるものとする。 const state = { products: [] } const actions = { cart_addProduct({state,…

Vuex: stateの取得

updated: 2019/12/11 vue@2.6.10 vuex@3.1.2 以下要検証 vuexのstateを取得するときdataで取得することができるが data() { return { target: this.$store.state.target } } 取得したstateのプロパティにアクセスするときに取得前の値(null?)を参照してしま…

Vuejs: $ref で得たデータを孫以降のcomponentと共有する方法

computed: { swiper() { return this.$refs.swiper.swiper },} この swiper を孫以降の component で共有したい場合 provide - inject >>> provide は data, method しか共有できない mixin >>> this.$refs が使えない Vuex の state で共有 >>> 〇 親 compo…

Vuex の actions の名前の付け方

大規模開発のため vuex の store.js をモジュール化すると各 component から vuex の action をインポートした際、action がどこのモジュールに含まれているかわからなくなってくる。 @store.js import Vue from 'vue'; import Vuex from 'vuex'; import act…

Vuex state management

state data をとどめておく場所。どの component からも this.$store.state.hoge からアクセス可能 getters state を加工したい場合使用。同じ加工を複数の component で使用したい場合、code の duplicate を防ぐ。どの component からも this.$store.gette…