[day23][前端][實作] 用webpack自架Vue3環境（中）－vuex，router

前情題要

上一篇在加入許多套件模組，許多的設定檔後已經讓你的webpack可以轉譯Vue相關的程式了，這篇就開始引入"Vuex"和"vue-router"吧

首先安裝兩個模組吧

npm i vue-router@next --save

npm i vuex@next --save

在Vue的進入點建立Vue實體的時候追加引入兩個模組

src\client\main.js

import { createApp } from 'vue';

import App from './app.vue';
import router from './router';
import store from './store';
略
createApp(App).use(store).use(router).mount('#app');

依照vue結構建立"router"和"store"並建立以下檔案內容

src\client\router\index.js

import { createRouter, createWebHashHistory, createWebHistory } from 'vue-router';
import home from '../views/home.vue'
const routes = [
  {
    path: '/',
    name: 'home',
    component: home,
  }
]
const router = createRouter({
  history: createWebHistory(),
  // history: createWebHashHistory(),
  routes
})
export default router;

src\client\store\index.js

import { createStore } from 'vuex'
export default createStore({
  state: {
    store: 'Vuex'
  },
  getters: {
  },
  mutations: {
  },
  actions: {
  },
  modules: {
  }
})

最後修改"app.js"檔案追加"router-view"和引入Vuex就可以了

<template>
  <div class="container">
    hello {{state.message}}
    <router-view
      class="main_container"
    />
    hello {{ vuexName }}
  </div>
</template>

<script>
import { reactive, computed } from 'vue';
import { useStore } from 'vuex';
export default {
  setup () {
    const state = reactive({
      message: 'Vue3'
    })
    const store = useStore();
    const vuexName = computed(() => store.state.store);
    return {
      state,
      vuexName
    }
  }
}
</script>
略

完成，現在畫面上出現三個hello world了！

完成，今天的工作就是這樣～！

githubday23