vue3中router路由以及vuex的store使用解析

<script>
import { useRouter, useRoute } from 'vue-router'
export default {
  setup() {
    const router = useRouter() // 元件內路由
    const route = useRoute() // 元件內路由資訊
  }
}
</script>

import { createStore } from 'vuex'
import login from './login'
const store = createStore({
  state: {},
  mutations: {},
  actions: {},
  modules: {
    login
  }
})
export default store

<script>
import { useStore } from 'vuex'
export default {
  setup() {
    const store = useStore()
    const state = store.state
       const methods = {
         // 處理commit
      handleMutation: () => {
        store.commit(...)
      },
      // 處理dispatch
      handleAction: () => {
        store.dispatch(...)
      }
       }
    return {
      ...methods 
    }
  }
}
</script>

import { createRouter, createWebHistory } from "vue-router";
// 路由規則
const routes = [
  {
    path: "/",
    name: "主頁",
    meta: ["istabbar"],
    component: () => import("../views/Home.vue"),
  },
];
//根據路由規則建立路由
const router = createRouter({
  history: createWebHistory(""),
  routes,
});
export default router;

import { createApp } from "vue";
import App from "./App.vue";
import router from "./router"; // 新增路由router引入
// 建立VUE物件
createApp(App)
  .use(router) // 使用.use(router)新增路由router
  .mount("#app");

import { useRouter } from 「vue-router」;
const router = useRouter();

<template>
  <div class="page">
    因為在setup內部沒有this存取許可權，不能直接使用this存取this.$router 或者
    this.$route。所有使用useRouter, useRoute來獲取
  </div>
</template>

<script>
import { getCurrentInstance } from "vue";
import { useRouter } from "vue-router";
export default {
  setup() {
    // 第一種方法：獲取路由物件 router 的方法1
    const vue = getCurrentInstance();
    const router1 = vue.ctx.$router;
    // 第二種方法：獲取路由物件 router 的方法2
    const router2 = useRouter();
      
    // 下面提供了router對應的方法使用大全
    // ------------------------------------------------------
    // router1.addRoute(parentOrRoute, route)
    // router1.afterEach(回撥函數)
    // router1.back() 等價於 go(-1)
    // router1.beforeEach(回撥函數)
    // router1.beforeResolve(回撥函數)
    // router1.currentRoute 獲取當前路由：如： {_rawValue: {…}, _shallow: true, __v_isRef: true, _value: {…}}
    // router1.forward() 等價於 go(1)
    // router1.getRoutes: ƒ getRoutes()
    // router1.go(delta) 等價於 routerHistory.go(delta) 跳到指定歷史記錄
    // router1.hasRoute(name) 判斷是否有對應的路由
    // router1.isReady() 判斷路由是否準備跳轉
    // router1.onError(回撥函數) 當發生錯誤的時候執行的
    // router1.options 獲取所有路由資訊 {history: {…}, routes: Array(5)}
    // router1.push(to) 跳轉到指定路由對應的頁面，有歷史記錄
    // router1.removeRoute(name) 動態的刪除某個路由
    // router1.replace(to) 直接跳轉到指定路由頁面，沒有歷史記錄
    // router1.resolve(rawLocation, currentLocation)  可以自定義跳轉引數的方法
    return {};
  },
  mounted() {
    // 第三種方法：獲取路由物件 router 的方法3
    console.log(this.$router);
  },
};
</script>

import { useRouter } from 「vue-router」;
const router = useRouter();

<template>
  <div class="page">
    因為在setup內部沒有this存取許可權，不能直接使用this存取this.$router 或者
    this.$route。所有使用useRouter, useRoute來獲取
  </div>
</template>

<script>
import { getCurrentInstance } from "vue";
import { useRoute } from "vue-router";
export default {
  setup() {
    // 第一種方法：獲取路由物件 router 的方法1
    const vue = getCurrentInstance();
    const route1 = vue.ctx.$router.currentRoute.value;
    console.log(route1);
    // 第二種方法：獲取路由物件 router 的方法2
    const route2 = useRoute();
    console.log(route2);
    // 下面提供了route對應的屬性使用大全
    // ------------------------------------------------------
    // fullPath: "/user"  完整路由路徑
    // hash: "" 錨點部分
    // href: "/user"  跳轉來的時候的路徑
    // matched: [{…}]   路由匹配日規則陣列
    // meta: {0: "istabbar"}  路由附加的後設資料
    // name: "個人中心" 路由的名稱
    // params: {}   路由跳轉時帶過來的附加引數，如果是物件需要轉換成JSON格式
    // path: "/user"  編碼 URL 的 pathname 部分，與路由地址有關
    // query: {}   地址附帶的引數
    // redirectedFrom: undefined  重定向跳轉過來之前的地址，如果沒有重定向，則為 undefined。
    return {};
  },
  mounted() {
    // 第三種方法：獲取路由物件 router 的方法3
    console.log(this.$route);
  },
};
</script>

import { createStore } from "vuex";
//建立儲存物件
export default createStore({
  // 需要儲存的值都放在這裡面
  state() {
    return {
      count: 0,    // 在檢視中通過$store.state.count來獲取
    };
  },
  // 在其他檢視中通過 $store.commit('setState', 10) 使用，用於修改stor存的值
  mutations: {
    setState(state, count) {    // 只能接受兩個引數，用於修改store存的值
      state.count = count;
    },
  },
  // 相當於元件的計算屬性 通過 $store.getters.doubleCount 獲取計算後的值
  getters: {
    doubleCount(state) {
      return state.count * 2;
    },
  },
  // 非同步任務 不會改變state 通過 $store.dispath('doubleCount') 使用
  actions: {
    doubleCount(context) {
      context.commit("doubleCount");
    },
  },
  // store的下級store 方便大型專案複雜資料管理，這裡面相當於可以在放置一個和外面這些一樣的模組
  modules: {},
});

import { createApp } from "vue";
import App from "./App.vue";
import router from "./router"; // 新增路由router引入
import store from "./store"; // 新增全域性儲存vuex引入
// 建立VUE物件
createApp(App)
  .use(router) // 使用.use(router)新增路由router
  .use(store) // 使用.use(store)新增全域性儲存vuex
  .mount("#app");

import { useStore } from 「vuex」;
const store = useStore();

<template>
  <div class="page">
    因為在setup內部沒有this存取許可權，不能直接使用this存取this.$router 或者
    this.$route。所有使用useRouter, useRoute來獲取
  </div>
</template>

<script>
import { getCurrentInstance } from "vue";
import { useStore } from "vuex";
export default {
  setup() {
    // 第一種方法：獲取路由物件 router 的方法1
    const vue = getCurrentInstance();
    const store1 = vue.ctx.$store;
    console.log(store1);
    // 第二種方法：獲取路由物件 router 的方法2
    const store2 = useStore();
    console.log(store2);
    // 下面提供了：store 對應的屬性使用大全
    // ------------------------------------------------------
    // commit(type, payload, options2) 在其他檢視中使用mutations中定義的方法
    // dispatch(type, payload) 非同步任務 不會改變state 在其他檢視中使用actions中定義的方法
    // getters: {}  相當於元件的計算屬性 通過 $store.getters.doubleCount 獲取計算後的值
    // state: (...)  store中儲存的值，就是通過這個在檢視中獲取store儲存的值
    return {};
  },
  mounted() {
    // 第三種方法：獲取路由物件 store的方法3
    console.log(this.$store);
  },
};
</script>