#vuejs vuex が難しいわけではないけど覚えるのに時間かかる

コロナの影響で仕事が急増!ピーク時は 10 時から翌朝 5 時まで働いてますが、vuejs のおかげで眠たくなっても仕事が疲れなくて寧ろ興奮しちゃって朝まで眠れないくらい。今は vuejs なしでは web 開発できないくらいハマっています。本当に javascript は世の中に一番使いやすいプログラミング言語の一つだと思います。
今までフロント経験が少ない人や web 開発初心者の人なら、是非おすすめします。短時間でいままでできなかったことができるようになるし、ソースの再利用とメンテナンスも抜群に管理しやすい!
関係ないこと言い過ぎかもとりあえず、vuejs は魅力的で学習する意味がある javascript のフレームワークであること。

基本的に開発中にあれっ?!これ前使っていたけど、どうやって呼び出していたっけみたいのものが公式サイトにも書いてなかったりして、いちいちググるのは時間かかるものとかをメモします。

#state を一括取得使う方法

  • mapState
  • mapActions
  • mapMutations
  • mapGetters
import { mapState, mapMutations, mapActions } from "vuex";
export default {
  computed: {
    ...mapState(["price", "number"]),
    ...mapState({
      pref: (state) => state.options.pref,
      gender: (state) => state.options.gender,
    }),
  },
  methods: {
    ...mapMutations({
      setNumber: "SET_NUMBER",
    }),
    ...mapActions({
      setNumber: "SET_NUMBER",
    }),
  },
};

#module 型 getter の使い方

const store = new Vuex.Store({
  state: {
    todos: [
      { id: 1, text: "...", done: true },
      { id: 2, text: "...", done: false },
    ],
  },
  getters: {
    getTodoById: (state) => (id) => {
      return state.todos.find((todo) => todo.id === id);
    },
  },
});

this.$store.getters.getTodoById(2)の結果はfalse

==vuex モジュールタイプで getter 呼び出し方!==これめちゃくちゃ忘れる!

vuex module getter の使い方

module getters 使う時

this.$store.getters['app/getTodo'];

module getters に引数渡して使う時

this.$store.getters['app/getOrderStatusNameById'](2)

#action と mutation の違い

項目actionmutation
非同期
state 変更
実行dispatchcommit
第一メソードcontextstate
2020-04-30
  • vuejs

関連記事

polyfill という宝物で開発時の ie11 対応した時のメモ
スクロールバー自由にカスタマイズできる vue-perfect-scrollbar について
chartjs でチャートコンポネント作ってみた時のメモ bar+line+pie
値段をカンマと円マーク表示 vuejs money-format filter 自作
vue hook 使って vuejs コンポーネントライフサイクル監視
vuejs i18n の html-lang と font 設定
vuejs スクロールでナビバー表示非表示
nuxtjs vue router params query ルートから取得できるもの
vuejs 開発時に遭遇したエラーリスト
nuxt cordova web ハイブリッドアプリ作成した時のメモ
vuejs で omisejapan の決済フォーム作成した時のメモ
vuejs-datepicker 使ってカレンダー表示 日本語多言語対応
laravel vuejs 初期設定