# 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 の違い

項目 action mutation
非同期
state 変更
実行 dispatch commit
第一メソード context state
2020-04-30
  • vuejs

関連記事

Nuxtjs 3 に Ant design Vue を使う
JavaScript ライブラリ aos.js 使ってスクロール連動アニメーション
vuejs back to top button component 作成
bootstrap vuejs 使って generate する際に babel が icons ファイル max 500KB エラー
Nuxtjs 動的なルーティング静的ページ自動生成
vuejs v-if と v-show の違い
vuejs で omisejapan の決済フォーム作成した時のメモ
vuejs スクロールでナビバー表示非表示
nuxtjs vue router params query ルートから取得できるもの
vuejs 開発時に遭遇したエラーリスト
javascript reduce 連想配列の合計計算覚えよう
値段をカンマと円マーク表示 vuejs money-format filter 自作
vuejs-datepicker 使ってカレンダー表示 日本語多言語対応
スクロールバー自由にカスタマイズできる vue-perfect-scrollbar について
vue hook 使って vuejs コンポーネントライフサイクル監視
Javascript vuejs の validation 正規表現でフォームチェック作ったときのメモ
javascript password generator ランダム文字列パスワード作成
nuxt cordova web ハイブリッドアプリ作成した時のメモ
chartjs でチャートコンポネント作ってみた時のメモ bar+line+pie
laravel に vuejs 使うための初期設定
polyfill という宝物で開発時の ie11 対応した時のメモ