vuexの新しいバージョンがあるそうで、新しい住まいを移転することにしました!

移行前

1つの方法は、基本パスを相対パスではなく@に設定し、ソースコードを簡略化することである.vue.config.jsファイルを開いて明記すればいいです.

const path = require('path');

module.exports = {
  pages: {
    index: {
      // entry for the page
      entry: 'frontend/src/main.js',
      title: 'Index Page',
    },
  },

  configureWebpack: {
    resolve: {
      alias: {
        '@': path.join(__dirname, 'frontend/src/')
      },
    },
  },
}

これから決意する.alias.@ frontend/src/pathと一致します.
設定変更後の効果をテストします.frontend/src/App.vueファイルを開き、デフォルトでインポートされたHelloworldパスを変更します.

import HelloWorld from './components/HelloWorld.vue';
import HelloWorld from '@/components/HelloWorld.vue';

npm run serveは間違いなく成功できる😋
では今.

正式に移転!

VUE 3のインストール

Vuex 4.0を使用するには、Vueも2です.xから3までです.xにアップグレードします.
以前の作業でfrontendソースに触ったことがないので、大胆にvue 3を削除して再インストールします.

# 혹시 모르니 백업
mv frontend frontend_v2

# 새로 만들기
vue create frontend

Vue 3を選択します.

前の記事を参照してプリセットを完了し、ページをジャンプします.
⚠⚠Vuexにアップグレードするには、vue dev-toolを再インストールする必要があります.
クロム拡張プログラムの公式バージョンを書いていますが、どうしてもVueラベルが見つかりません.
調べてみるとBetaバージョンの使用を受け入れる必要があることがわかりました
これは公式です。、βバージョンリンクのダウンロードはここにあります.
βのせいか、あまり機能していません.この時少し後悔して移転します😊
ベタ...君はそんなことを言ったことがない.

Vuex 4.xの使用

Vueを3に設定します.xにアップグレードすると、自然にvuex 4になります.xを使います.

まずインストールします。

npm install vuex@next --save

ストレージの作成

frontend/src/store/index.jsファイルを作成し、内容を入力します.

import { createStore } from 'vuex';
import reservation from './modules/reservation';

// ⚠️ store 변수를 만들어서 export 한다는 점에 주의! 
export const store = createStore ({
    modules: { reservation },
});

vuex 4は、vuexモジュールにおいてcreateStoreを提供する.名前の通り、ショップを作ります!reservationモジュールの作成が開始されました.を選択して設定できます.

reservationモジュールの作成

frontend/src/store/modules/reservation/index.jsファイルを作成し、state、getters、actions、mutationsを以下のように定義します.

import MUTATIONS from './mutation';

const state = {
  reservations: [],
};

const getters = {
  reservations: (_state) => {
    return _state.reservations;
  }
};

const actions = {
};

const mutations = {
  [MUTATIONS.SET_RESERVATIONS]: (_state, list) => {
      _state.reservations = list;
  }
};

export default {
  namespaced: true,
  state,
  getters,
  actions,
  mutations,
};

frontend/src/store/modules/reservation/mutation.jsも作られており、下記のようにテスト用が追加されています.

const MUTATIONS = {
  SET_RESERVATIONS: 'setReservations',
};

export default MUTATIONS;

作成したstoreはmainです。jsから持ってきて使いましょう

frontend/src/main.jsを先ほど作成したstoreを使用するように変更します.

import { createApp } from 'vue'
import { store } from './store';

import App from './App.vue'

const app = createApp(App);

app.use(store);
app.mount('#app');

次に、構成部品(画面)に書いてみましょう。

デフォルトで作成されたHelloWorld.vue素子をテストします.frontend/src/components/HelloWorld.vueオープン!

<script>
import { createNamespacedHelpers } from 'vuex';
import MUTATIONS from '@/frontend/src/store/modules/reservation/mutation';

const { mapGetters, mapMutations } = createNamespacedHelpers('reservation');

export default {
  name: 'HelloWorld',
  props: {
    msg: String,
  },
  computed: {
    ...mapGetters({
      list: 'reservations',
    }),
  },

  methods: {
    ...mapMutations({
      setList: MUTATIONS.SET_RESERVATIONS,
    }),
  },
}
</script>

先ほど作成した予約モジュールをつなぎました.
今回は変更できるか確認してみます.template領域にリストを印刷し、ボタンを作成して変更します.

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <div>
       <!-- 찍어보기용 -->
       {{ list }}
       
       <!-- 바꿔보기용 -->
       <input type=button @click="handleTest" />
    </div>
    ...

handleTest関数も追加されました.

  methods: {
    ...mapMutations({
      setList: 'setReservations',
    }),
    handleTest() {
      // mutation 함수를 호출해서 list 배열에 아무 데이터나 넣어주었다.
      this.setList(['hi', 'i\'m', 'sena',]);
    },
  },

確認の時間！

今npm run serveで確認しましょう!👻

本当に丑いですね.reservationstoreのstate初期値[]の空の配列がよく撮れています.
念のため、vue dev-toolで撮ってみます.

よし!
ボタンを押してhandleTest()関数を呼び出します.


う~ん、よく取り替えてくれました
今日は西で終わります!