State

大多数时候，state 是 store 的核心部分。我们通常从定义应用程序的状态开始。在 Pinia 中，状态被定义为返回初始状态的函数。 Pinia 在服务器端和客户端都可以工作

///src/store/count.ts
import { defineStore } from 'pinia'

// useStore 可以是 useUser、useCart 之类的任何东西
// 第一个参数是应用程序中 store 的唯一 id

export const useStore = defineStore('storeId', {
    state: () => {
        return {
          // 所有这些属性都将自动推断其类型
          counter: 0,
          name: 'Eduardo',
          isAdmin: true,
        }
      },
    })

//dome.vue 使用 store
<script setup lang="ts"> 
import { useStore } from "../src/store/user"; 

const store = useStore();
console.log(store); 
store.counter++

//重置store
<button @click="reset">重置store</button> 
const reset = () => { 
        store.$reset();
    };
</script>

// 批量修改数据
<button @click="patchStore">批量修改数据</button>
const patchStore = () => { 
    store.$patch(
      {  
        name: "张三", 
        age: 100,
        sex: "女", 
      }); 
  };
  
 //## 直接替换整个state
 store.$state = { counter: 666, name: '张三' }

Getter

Getter 完全等同于 Store 状态的计算值。它们可以用 defineStore() 中的 getters 属性定义。他们接收“状态”作为第一个参数以鼓励箭头函数的使用：

export const useStore = defineStore('main', {
  state: () => ({
    counter: 0,
  }),
  getters: {
    doubleCount: (state) => state.counter * 2,
    
    doubleCountPlusOne() {
      return this.doubleCount + 1
    },

  },
})
}


//实例上访问 getter
<template>
  <p>Double count is {{ store.doubleCount }}</p>
  <p>Double count is {{ store.doubleCountPlusOne }}</p>
</template>

<script setup>
import { useStore } from "../src/store/user"; 

    const store = useStore();
</script>

Actions (可以是异步的)

Actions 相当于组件中的 methods。它们可以使用 defineStore() 中的 actions 属性定义，并且它们非常适合定义业务逻辑：

export const useStore = defineStore('main', {
  state: () => ({
    counter: 0,
  }),
  actions: {
    increment() {
      this.counter++
    },
    randomizeCounter() {
      this.counter = Math.round(100 * Math.random())
    },
  },
})

//实例上访问 Actions
<script setup>
import { useStore } from "../src/store/user"; 

    const store = useStore();
    store.increment()
    store.randomizeCounter()
</script>

记录Pinia

State

Getter

Actions (可以是异步的)