vuex

Vuex state を form に使うとき、入力と同時に state が更新されてしまう問題

環境: vue@2.6.14 vuex@3.6.2 <v-text-fileld v-model=$store.state.userData.nickname></v-text-field> このように state をバインドすると値が入力するたびに stateが更新されるため、フォームが submit されようと cancel されようと関係なく submit 扱いになってしまう。 solution) フォームで編集したいデータを値渡しで格納す…

VueJS Browser back を検知する detect browser back

環境: vue@2.6.14 vuex@3.6.2 @app.js history.replaceState(null, '', null)window.addEventListener('popstate', function() { vue.$store.commit('ROUTER_DETECT_BROWSER_GO_AND_BACK')}) @router.js const state = { detectBrowserGoAndBack: 0 } const…

Vuexでstateにあらかじめ設定していないプロパティを新たに挿入するときの注意事項

環境: vue@2.6.12 vuex@3.6.2 state = { test: {} } mutations = { 'addNewProp'(state, payload) { state.test[payload.key] = payload.content OR Object.assign(state.test, {[payload.key]: payload.content}) } } 上記でstateに新しいプロパティを付与…

Vuex: chrome の dev tool で mutation の検知ができなくなったら

環境: vuex@3.5.1 chrome-Vue.js devtools@5.3.3 mutation を検知できないので state の変遷も検知できなくなった。 firefox では検知可能だった。 solution) chrome 拡張機能から Vue.js devtools を再インストール

Vuetify - v-dialog の v-model に vuex state を指定する方法 --- v-dialog を別のコンポーネントから制御する

updated: 2021/6/16 通常 v-dialog は v-model で 該当コンポーネントが保持する data の値を指定する。 それによって dialog の外側をクリックしたときに表示を toggle することができる。 ここで vuex の state を指定すると外側クリック時にコンソール上…

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…