Pinia的基本使用与实践

适用于初学者学习pinia在vue3中的基本使用，并写一个TodoList小案例

基本使用

安装

npm install pinia 

或者使用yarn

yarn add pinia

注册

import { createApp } from "vue";
import { createPinia } from "pinia";
import App from "./App.vue";
import router from "./router";

const app = createApp(App);
const pinia = createPinia();

app.use(pinia);
app.use(router);
app.mount("#app");

基本使用

定义Store

import { defineStore } from "pinia";

export const useCounter = defineStore("store", {
  // 定义state  
  state: () => {
    return {
      count: 0,
    };
  },
  // 定义getters
  getters: {
    double: (state) => state.count * 2,
  },
  // 定义actions 可以实现异步操作
  actions: {
    increment() {
      return this.count++;
    },
  },
});

在组件中使用

<script lang="ts" setup>
import { onMounted } from "vue";
import { useCounter } from "@/store/counter";

// 使用store
const counterStroe = useCounter();

onMounted(() => {
  // 访问state和getters
  console.log(counterStroe.count);
  console.log(counterStroe.double);
});

function handleClick() {
  // 调用actions
  counterStroe.increment();
}
</script>

TodoList

实现一个增删改查、搜索(结合防抖)功能的TodoList

[pinia-todo](panglehaoya/pinia-todo (github.com))