小编Ama*_*ser的帖子

问题已更新

我正在尝试将Pinia的商店与使用Vue.js创建的 Web 组件一起使用，但控制台中出现以下错误：

[Vue 警告]：在 <HelloWorld.ce msg="message"> 处找不到注入“Symbol(pinia)”

我有一个非常简单的例子。

1. 主要.ts

import { defineCustomElement } from 'vue'
import HelloWorld from './components/HelloWorld.ce.vue'

const ExampleElement = defineCustomElement(HelloWorld)
customElements.define('hello-world', ExampleElement)

2. 商店.ts

import { defineStore, createPinia, setActivePinia } from "pinia";

setActivePinia(createPinia());

export const useCounterStore = defineStore('counter', {
  state: () => ({
    counter: 0,
  }),

  actions: {
    increment() {
      this.counter++;
    },
  },
});

3. HelloWorld.ce.vue

<script setup lang="ts">
import { ref } from 'vue'
import { useCounterStore } from '../store.ts'

defineProps<{ msg: string …

我希望菜单项的文本离颜色条远一点，但不知道如何。在 Chrome 和 IE11 中获得相同的结果。

  .smenu a {
      display: block;
      color: black;
      padding: 16px 1px;
      margin: 9px 5px;
      text-decoration:none;
      width: 4px;
      background: #18dcff;
  }

<div class="smenu">
  <div>
    <div class="item" id="messages">
      <div class="smenu">
        <a href="#a">New</a>
        <a href="#a">Sent Items</a>
        <a href="#a">Spam</a>
      </div>
    </div>
  </div>
</div>