同步發表到驢形筆記
上一篇在加入許多套件模組,許多的設定檔後已經讓你的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了!
完成,今天的工作就是這樣~!