Pinia的基本使用与TodoList实例

#Pinia的基本使用与TodoList实例| 来源: 网络整理| 查看: 265

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++; }, }, });

在组件中使用

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(); } TodoList

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

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

【本文地址】

公司简介

联系我们