Hapicode

# 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

関連記事

polyfill という宝物で開発時の ie11 対応した時のメモ
nuxt cordova web ハイブリッドアプリ作成した時のメモ

vueのnuxtjsのSPAでハイブリッドアプリを作る、コールドバーという神使って...

javascript reduce 連想配列の合計計算覚えよう

javascript 配列 sum 合計計算、reduce 使ってやってみて覚える連想配列の落とし穴...

スクロールバー自由にカスタマイズできる vue-perfect-scrollbar について

スクロールイベント監視、発火の時に使える便利ツールvue-perfect-scrollbarについて...

chartjs でチャートコンポネント作ってみた時のメモ bar+line+pie
値段をカンマと円マーク表示 vuejs money-format filter 自作

vuejsで円マークカンマ区切りのフィルター作りました。...

vue hook 使って vuejs コンポーネントライフサイクル監視

vuejsのhook使って開発を便利にしていこう...

vuejs i18n の html-lang と font 設定

vue-i18n 多言語対応の際にhtml lang meta 変更と 選択言語によってHPフォント...

vuejs スクロールでナビバー表示非表示

vuejsで上にスクロールするとナビメニューが表示、下にスクロールすると非表示の切り替えをやってみま...

nuxtjs vue router params query ルートから取得できるもの

nuxtjs使うなら必ずvueルーターのパラメータやクエリーを取得したいときがくる。...

vuejs v-if と v-show の違い

vuejs ifとshowの条件分岐について詳しく解説 よく使われる v-if と v-show の...

vuejs 開発時に遭遇したエラーリスト

改めてvuejsのドキュメント読みながら只管エラーを出しまくっています。...

vuejs で omisejapan の決済フォーム作成した時のメモ

omisejapanカードペイメントvuejsでフォーム開発する時のメモ...

Javascript vuejs の validation 正規表現でフォームチェック作ったときのメモ

電話番号チェック・メールアドレスチェック・文字チェック・郵便番号のチェックに使えるjavascrip...

vuejs-datepicker 使ってカレンダー表示 日本語多言語対応

bootstrap-vue2.5 カレンダーコンポーネントがでるまでの辛抱でvuejs-datepi...

laravel に vuejs 使うための初期設定

PHPフレームワークlaravelにvuejs入れる時の初期設定まとめ、備忘録的...