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

関連記事

Nuxtjs 3 に Ant design Vue を使う

Ant-design-vue 4.x使うためのNuxt plugin 設定...

JavaScript ライブラリ aos.js 使ってスクロール連動アニメーション

aos.js ライブラリ使ってHTML要素がスクロールと連動してアニメーションをします。...

vuejs back to top button component 作成

vue でトップに戻るボタンを作ることがよくありますが、ライブラリー使わずに実現してみました。...

bootstrap vuejs 使って generate する際に babel が icons ファイル max 500KB エラー
Nuxtjs 動的なルーティング静的ページ自動生成

Nuxtjs 動的なルーティング使ってAPIとJSONで静的ページ一括生成してSEO対策...

vuejs v-if と v-show の違い

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

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

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

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

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

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

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

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

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

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

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

値段をカンマと円マーク表示 vuejs money-format filter 自作

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

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

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

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

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

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

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

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

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

javascript password generator ランダム文字列パスワード作成

javascriptで大文字・小文字・数字・記号対応のランダムパスワードつくることがありますが、vu...

nuxt cordova web ハイブリッドアプリ作成した時のメモ

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

chartjs でチャートコンポネント作ってみた時のメモ bar+line+pie
laravel に vuejs 使うための初期設定

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

polyfill という宝物で開発時の ie11 対応した時のメモ