Vuexを学習していますが、ミューテーションのコミットで質問があります。
分かる方がいましたらぜひご回答いただきたいです。
やりたいことは以下です。
・Vuexのストアに登録しているプライスリストを、消費税を含んだプライスリストに書き換えてブラウザに表示させる。
以下の手順で行うつもりでコードを書きました。
・消費税分を計算してpriceを書き換えるミューテンションハンドラをコンポーネント側のcreatedで叩きます。
・ブラウザにレンダリングされるプライスリストは消費税を含んだpriceが表示されているリストになります。
しかし実際にコードを実行すると上記の挙動にはならず、レンダリングされるのはstateに登録したままのプライスリストでした。
ブラウザレンダリング後に、試しに@clickを使ってこのミューテンションハンドラを叩くと問題なく書き換わるのですが、なぜcreatedのタイミングで書き換わらないかが分かりません。また、mountedに設定しても変わりませんでした。
分かる方がいましたら、ぜひご回答よろしくお願いいたします。
javavscript
1// store.js 2 3state: { 4 priceList: [ 5 { id: 1, name: "apple", price: 100 }, 6 { id: 2, name: "orange", price: 200 }, 7 { id: 3, name: "grape", price: 300 } 8 ] 9}, 10mutations: { 11 [CALC_TAX](state) { 12 state.priceList = state.priceList.map(v => ({...v, price: v.price * 1.08})); 13 } 14}
javavscript
1// コンポーネント 2 3created() { 4 this.CALC_TAX; 5}, 6methods: { 7 ...mapMutations(["CALC_TAX"]) 8}
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。