08vite集成router,vuex,pinia

【一】集成router

#步骤 1: 创建一个新的 Vite + Vue 项目
如果你还没有一个 Vite + Vue 的项目，你可以使用 Vite 的 CLI 工具来创建一个。在你的命令行中运行以下命令：
​
npm create vite@latest my-vue-app -- --template vue  
cd my-vue-app  
npm install
​
#步骤 2: 安装 vue-router
在你的项目目录下，使用 npm 或 yarn 来安装 vue-router：
​
npm install vue-router@4  
注意，我们使用 @4 来确保我们安装的是与 Vue 3 兼容的版本。
​
#步骤 3: 配置 vue-router
创建路由文件：
在项目中的 src 目录下创建一个名为 router 的新文件夹，并在其中创建一个 index.js 文件。这个文件将用于设置和导出路由。
​
"""import { createRouter, createWebHistory } from 'vue-router';  
import Home from '../views/Home.vue'; // 假设你有一个 Home.vue 组件  
 
const routes = [  
  {  
    path: '/',  
    name: 'Home',  
    component: Home,  
  },  
  // 你可以在这里添加更多的路由  
];  
 
const router = createRouter({  
  history: createWebHistory(process.env.BASE_URL),  
  routes,  
});  """
 
export default router;
在 Vue 应用中使用路由：
#修改你的主 Vue 文件（通常是 src/main.js 或 src/main.ts），以便使用路由。
​
// src/main.js  
"""import { createApp } from 'vue';  
import App from './App.vue';  
import router from './router'; // 引入路由  
 
createApp(App).use(router).mount('#app');"""
#在 App.vue 中使用 <router-view>：
在你的 App.vue 文件中，你需要使用 <router-view> 来告诉 Vue Router 在哪里渲染匹配的组件。
​
vue
<!-- src/App.vue -->  
"""<template>  
  <div id="app">  
    <router-view></router-view>  
  </div>  
</template>  
 
<script>  
export default {  
  name: 'App',  
}  
</script>"""
#步骤 4: 运行你的应用
现在，你应该已经成功地将 vue-router 集成到你的 Vite + Vue 项目中了。你可以通过运行以下命令来启动你的应用，并查看路由是否按预期工作：
​
npm run dev  
​

【二】集成vuex

#步骤 1: 安装 vuex
首先，你需要在你的项目目录中安装 vuex。使用 npm 或 yarn 来安装它：
​
npm install vuex@版本号 --save  
​
注意，我们使用 @next 来确保我们安装的是与 Vue 3 兼容的 vuex 版本。但是，随着 Vue 3 和 Vuex 4 的稳定，现在通常可以省略 @next 并直接安装 vuex。
​
#步骤 2: 创建 Vuex Store
在你的项目中创建一个新的目录（通常是 src/store），并在其中创建一个 index.js 文件。这个文件将用于设置和导出 Vuex store。
​
// src/store/index.js  
"""// src/store/index.js
import { createStore } from 'vuex';
​
export default createStore({
  state() {
    return {
      count: 0,
      age:0
    };
  },
  mutations: {
    increment(state) {
      state.count++;
    }
  },
  actions: {
    incrementIfOddOnRootSum({ state, commit, rootState }) {
      if ((state.count + rootState.otherCount) % 2 === 1) {
        commit('increment');
      }
    }
  },
  getters: {
    doubleCount: (state) => state.count * 2
  },
  modules: {
    // 模块化的store
  }
});"""
注意：如果你的应用不需要模块化的 Vuex store，上面的例子就足够了。但是，如果你的应用变得更大，你可能想要将 store 分割成多个模块。
​
#步骤 3: 在 Vue 应用中使用 Vuex
接下来，你需要在你的 Vue 应用中引入并使用 Vuex store。这通常在你的 main.js 或 main.ts 文件中完成。
​
​
// src/main.js  
"""import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from './router/index.js'
import store from "./store/index.js";
createApp(App).use(router).use(store).mount('#app')
"""
#步骤 4: 在组件中使用 Vuex
现在，你可以在 Vue 组件中通过 this.$store 访问 Vuex store，或者更常见的是，使用 Vuex 提供的 mapState、mapMutations、mapActions 和 mapGetters 辅助函数来更简洁地访问 state、mutations、actions 和 getters。
​
"""
<template>
  <h1>我是首页</h1>
   <p>{{ store.state.count }}</p>
    <button @click="increment">Increment</button>
</template>
​
<script setup>
import store from "../store/index.js";
const increment = () => store.commit('increment');
</script>"""

【三】集成pinia

#步骤 1: 安装 pinia
首先，你需要在你的项目目录中安装 pinia。使用 npm 或 yarn 来安装它：
​
npm install pinia  
# 或者使用 yarn  
yarn add pinia
​
#步骤 2: 创建 Pinia Store
在你的项目中创建一个新的目录（通常是 src/stores），并在其中创建一个或多个 .js 或 .ts 文件来定义你的 Pinia store。例如，你可以创建一个 useUserStore.js 来管理用户相关的状态。
​
​
// src/stores/useUserStore.js  
import { defineStore } from 'pinia';  
  
export const useUserStore = defineStore('user', {  
  state: () => ({  
    name: 'Guest',  
    isAuthenticated: false,  
  }),  
  actions: {  
    login(userName) {  
      this.name = userName;  
      this.isAuthenticated = true;  
    },  
    logout() {  
      this.name = 'Guest';  
      this.isAuthenticated = false;  
    },  
  },  
});
​
#步骤 3: 在 Vue 应用中使用 Pinia
接下来，你需要在你的 Vue 应用中创建并挂载 Pinia。这通常在你的 main.js 或 main.ts 文件中完成。
​
javascript
// src/main.js  
import { createApp } from 'vue';  
import { createPinia } from 'pinia';  
import App from './App.vue';  
  
const app = createApp(App);  
  
// 创建 Pinia 实例  
const pinia = createPinia();  
  
// 将 Pinia 挂载到 Vue 应用上  
app.use(pinia);  
  
app.mount('#app');
​
#步骤 4: 在组件中使用 Pinia Store
现在，你可以在 Vue 组件中通过 useUserStore 函数来访问你的 Pinia store。在 Vue 3 的 Composition API 中，这是推荐的访问 store 的方式。
​
vue
<template>  
  <div>  
    <p>User: {{ userName }}</p>  
    <button @click="login">Login</button>  
    <button @click="logout">Logout</button>  
  </div>  
</template>  
  
<script>  
import { computed } from 'vue';  
import { useUserStore } from './stores/useUserStore';  
  
export default {  
  setup() {  
    const store = useUserStore();  
  
    const userName = computed(() => store.name);  
  
    const login = () => {  
      store.login('John Doe');  
    };  
  
    const logout = () => {  
      store.logout();  
    };  
  
    return { userName, login, logout };  
  },  
};  
</script>
​