Pinia_基本学习文档

记录的Pinia学习md文档

Pinia

全局状态管理工具

特点：

去除mutations。只有state、getters、actions、
actions支持同步和异步

安装

yarn add pinia
npm install pinia

引入

main.ts

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

初始化仓库

新建store/store-namespace.ts，将名称抽离

export const enum Names {
	Test = 'TEST'
}

新建store/index.ts

import {
    defineStore } from 'pinia'
import {
    Names } from './store-namespace'
export const useTestStore = defineStore(Names.Test, {
   
    //State需要箭头函数返回
    State: ()=> {
   
        return {
   
            current: 1，
            name: 'Animuss'
        }
    },
    getters: {
   
        
    },
    actions: {
   
        
    }
})

修改State的值

1.允许直接修改

//在引用pinia的页面中
<template>
     <div>
         <button @click="Add">+</button>
          <div>
             {
   {
   Test.current}}
          </div>
     </div>
</template>

<script setup lang='ts'>
import {
   useTestStore} from './store'
const Test