Vue+Vuetify+Pinia转CDN模式后，组件如何访问Pinia Store与主题？

1. 确认CDN资源加载顺序（严格遵循） #

在GAS的HTML文件（如Index.html）头部引入UMD版本依赖，确保加载顺序正确：

<!-- Vue UMD -->
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<!-- Pinia UMD -->
<script src="https://unpkg.com/pinia@2/dist/pinia.iife.js"></script>
<!-- Vuetify UMD 及样式 -->
<link href="https://cdn.jsdelivr.net/npm/vuetify@3/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/vuetify@3/dist/vuetify.min.js"></script>
<!-- Vue Router（若需保留路由功能） -->
<script src="https://unpkg.com/vue-router@4/dist/vue-router.global.js"></script>

2. 初始化Pinia并创建navigationStore #

在HTML的<script>标签中，先初始化Pinia，再定义并注册导航Store：

const { createApp } = Vue;
const { createPinia, defineStore } = Pinia;

// 定义navigationStore
const useNavigationStore = defineStore('navigation', {
  state: () => ({
    currentRoute: 'dashboard',
    sidebarOpen: false
  }),
  actions: {
    setCurrentRoute(route) {
      this.currentRoute = route;
    },
    toggleSidebar() {
      this.sidebarOpen = !this.sidebarOpen;
    }
  }
});

// 初始化Vue应用，注册Pinia和Vuetify主题
const app = createApp({});
const pinia = createPinia();
app.use(pinia);
app.use(Vuetify.createVuetify({
  theme: {
    defaultTheme: 'light',
    themes: {
      light: {
        colors: {
          primary: '#1976D2',
          secondary: '#424242',
          accent: '#82B1FF',
        }
      },
      dark: {
        colors: {
          primary: '#2196F3',
        }
      }
    }
  }
}));

3. 实现AppBar组件并访问Store与主题 #

定义AppBar组件时，通过useNavigationStore获取Store实例，同时通过$vuetify访问主题配置：

app.component('app-bar', {
  template: `
    <v-app-bar :color="$vuetify.theme.currentTheme.colors.primary">
      <v-app-bar-nav-icon @click="toggleSidebar"></v-app-bar-nav-icon>
      <v-toolbar-title>{{ currentRoute }}</v-toolbar-title>
      <v-spacer></v-spacer>
      <v-btn @click="toggleTheme">切换主题</v-btn>
    </v-app-bar>
  `,
  setup() {
    const navigationStore = useNavigationStore();
    const vuetify = Vue.inject('$vuetify');

    // 主题切换逻辑
    const toggleTheme = () => {
      vuetify.theme.global.name.value = vuetify.theme.global.name.value === 'light' ? 'dark' : 'light';
    };

    return {
      currentRoute: navigationStore.currentRoute,
      toggleSidebar: navigationStore.toggleSidebar,
      toggleTheme,
      vuetify
    };
  }
});

// 挂载应用到页面节点
app.mount('#app');

4. GAS HTML页面结构 #

确保页面包含Vue应用挂载点：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- 上述CDN资源 -->
</head>
<body>
  <div id="app">
    <v-app>
      <app-bar></app-bar>
      <!-- 其他页面内容 -->
    </v-app>
  </div>
  <!-- 上述初始化脚本 -->
</body>
</html>

关键注意事项 #

• GAS环境限制：必须使用UMD全局变量（如Vue、Pinia），禁止ES模块语法
• Store访问：组件内必须在setup函数中调用useNavigationStore()获取实例，不能直接全局调用
• 主题访问：模板中可直接使用$vuetify，脚本内通过Vue.inject('$vuetify')获取实例
• 响应式保障：Pinia的state在模板中自动保持响应式，无需额外处理

内容的提问来源于stack exchange，提问作者Vaquez Vincent