如何在Vue项目的index.html中访问Vuex Store？

你遇到的问题很典型：在index.html的脚本里直接用this.$store会报错，是因为这里的this并不指向Vue实例——这些脚本是在Vue应用初始化的上下文之外运行的，自然拿不到Vuex Store的引用。下面给你两种可行的解决办法：

方法一：把依赖Vuex的逻辑移到Vue应用内部（推荐） #

既然你的cookie操作依赖Vuex的状态，更合理的做法是把这部分逻辑放到Vue组件或者应用初始化的钩子中，等Vuex Store准备好之后再执行。

步骤1：修改index.html，移除依赖Vuex的代码 #

先把index.html里那个包含this.$store的脚本改成纯占位，我们后续在Vue里处理逻辑：

<!-- Cookie Consent -->
<script type="text/javascript" src="//www.freeprivacypolicy.com/public/cookie-consent/3.1.0/cookie-consent.js"></script>
<script type="text/javascript">
 document.addEventListener("DOMContentLoaded", function() {
 cookieconsent.run({
 notice_banner_type: "interstitial",
 consent_type: "express",
 palette: "dark",
 language: "en"
 });
 });
</script>
<!-- 保留cookie-consent的占位脚本，逻辑后续在Vue中处理 -->
<script type="text/plain" cookie-consent="functionality"></script>
<script type="text/plain" cookie-consent="tracking">
 document.cookie = "trackingCookie=true";
</script>
<script type="text/plain" cookie-consent="strictly-necessary">
 document.cookie = "strictlyNecessaryCookie=true";
</script>
<noscript >Cookie Consent by <a href="https://www.FreePrivacyPolicy.com/free-cookie-consent/" rel="nofollow noopener">FreePrivacyPolicy.com</a></noscript >

步骤2：在Vue组件中处理cookie逻辑 #

比如在App.vue的mounted钩子中，监听cookie consent的初始化事件，然后读取Vuex的状态来设置cookie：

Vue 2写法：

<template>
  <div id="app">
    <!-- 你的应用内容 -->
  </div>
</template>

<script>
export default {
  mounted() {
    // 监听cookie consent初始化完成的事件
    document.addEventListener('cookieconsent_initialized', () => {
      // 检查用户是否同意了functionality类型的cookie
      if (cookieconsent.hasConsented('functionality')) {
        const activeLanguage = this.$store.getters.getActiveLanguage;
        // 设置对应的cookie
        document.cookie = `functionalityCookie=${activeLanguage}; path=/`;
      }
    });
  }
}
</script>

Vue 3写法（Composition API）：

<template>
  <div id="app">
    <!-- 你的应用内容 -->
  </div>
</template>

<script setup>
import { onMounted } from 'vue';
import { useStore } from 'vuex';

const store = useStore();

onMounted(() => {
  document.addEventListener('cookieconsent_initialized', () => {
    if (cookieconsent.hasConsented('functionality')) {
      const activeLanguage = store.getters.getActiveLanguage;
      document.cookie = `functionalityCookie=${activeLanguage}; path=/`;
    }
  });
});
</script>

这种方法符合Vue的最佳实践，避免了全局变量污染，也能确保Store已经初始化完成。

方法二：将Vuex Store暴露到全局window对象 #

如果因为某些原因必须在index.html的脚本中直接处理，你可以在Vue初始化时把Store挂载到全局window对象上，这样就能在外部脚本中访问了。

步骤1：在main.js中暴露Store #

Vue 2：

import Vue from 'vue';
import store from './store';
import App from './App.vue';

new Vue({
  store,
  render: h => h(App)
}).$mount('#app');

// 将Store挂载到全局window对象
window.$store = store;

Vue 3：

import { createApp } from 'vue';
import store from './store';
import App from './App.vue';

const app = createApp(App);
app.use(store);
app.mount('#app');

// 将Store挂载到全局window对象
window.$store = store;

步骤2：修改index.html中的脚本 #

把this.$store改成window.$store，同时确保Store已经初始化完成：

<script type="text/plain" cookie-consent="functionality">
  // 等待DOM和Vue实例都初始化完成
  document.addEventListener("DOMContentLoaded", function() {
    if (window.$store) {
      const activeLang = window.$store.getters.getActiveLanguage;
      document.cookie = `functionalityCookie=${activeLang}; path=/`;
    }
  });
</script>

不过要注意，这种方法会引入全局变量，可能带来命名冲突的风险，所以只在必要时使用。

内容的提问来源于stack exchange，提问作者Mir Stephen