Vue snippets插件原理与使用介绍

<div v-for="item in items" :key="item.id">
  {{ item }}
</div>

<script lang="ts" setup>
import { ref } from 'vue'
</script>
<template>
  <div>
  </div>
</template>
<style lang="scss" scoped>
</style>

<div v-for="item in items" :key="item.id">
  {{ item }}
</div>

const name = ref(initialValue)

beforeRouteEnter(to, from, next) {
  // called before the route that renders this component is confirmed.
  // does NOT have access to `this` component instance, because it has not been created yet when this guard is called!
  // can call `next`...
}

import { InjectionKey } from 'vue'
import { createStore, useStore as baseUseStore, Store } from 'vuex'
export interface State {
  count: number
}
export const key: InjectionKey<Store<State>> = Symbol()
export const store = createStore<State>({
  state: {
    count: 0
  }
})
// 定义自己的 `useStore` 组合式函数
export function useStore () {
  return baseUseStore(key)
}