0.写在后面

  • 本教程应用基于Vue.js 3我的项目来解说

1.装置

参考官网装置

yarn add pinia# or with npmnpm install pinia

2.导入

在main.js或main.ts导入Pinia.js

import { createPinia } from 'pinia'app.use(createPinia())

3.新建Store

先在src文件夹中创立store文件夹
新建index.ts或index.js文件，本教程应用ts

import { ref } from 'vue'import { defineStore } from 'pinia'export const useMainStore = defineStore('main', () => {  // 就像写script setup一样来写store  const count = ref<number>(1)  const increment = ():void => {    count.value++;  }  return { count, increment }})

4.应用Store

在App.vue

<template>  <div>    count: {{ count }}    <button @click="increment()">increment</button>  </div></template><script lang="ts" setup>import { storeToRefs } from 'pinia'import { useMainStore } from '@/store/index'// hooks一样来应用const useMainStore = useMainStore()const { count, increment } = storeToRefs(useMainStore)// vue外面也能够间接改count.value = 0</script>