pinia使用方法---笔记

1、在创建一个文件用来写pinia代码

import { defineStore } from 'pinia'

export const useUsersStore = defineStore('users', {
     // 管理状态
    state: () => {
        return{
            name:'小明',
            age:'23',
            sex:'男'
        }
    },
    // 类似计算属性
    getters:{  
        getAddAge:(state)=>{
            return Number(state.age) + 100;
        }
    },
    // 可以写异步和同步代码
    actions:{
        saveName(name:string){
            this.sex  = name
        }
    }
})

2、在main.ts添加代码,至此我们就可以使用了

import { createPinia } from 'pinia'
createApp(App).use(pinia).mount('#app')

3、我们可以通过结构获取state的值，但获取到的值不是响应式的，所有可以使用useUsersStore转化成响应式

<script setup lang="ts" >
import { storeToRefs } from 'pinia'
import { useUsersStore } from '@/store/user'
const store = useUsersStore()
const { name, sex, age } = storeToRefs(store)
<script>

4、

   // 可以直接修改
  name.value = '小红'
   //也可以使用$patch修改
 store.$patch({
        name: '小红',
        age: '20',
        sex: '女'
    })
//  重置数据
store.$reset()
 //    actions 可以直接调用
  store.saveName('4444')