开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 5 天，点击查看活动详情”

创建store

defineStore 方法用来创建store，有两种方式，其实就是第二个参数是options对象还是setup函数的问题。

option形式创建useUserStore

export const useUserStore = defineStore('user', {
    state: () => ({
        name: '管理员',
      }),
      getters: {
        nameLength: (state) => state.name.length,
      },
      actions: {
        async insertPost(data: string) {
          // await异步请求
          // await requestUserInfo();
          this.name = data
        },
      },
})

也可

/**
* @param id - store的id (必须唯一)
* @param options - 类似于vuux的形式定义store
**/
import { defineStore } from 'pinia'

export const useUserStore = defineStore({
  id: 'user',
  state: () => ({
    name: '管理员',
  }),
  getters: {
    nameLength: (state) => state.name.length,
  },
  actions: {
    async insertPost(data: string) {
      // await异步请求
      // await requestUserInfo();
      this.name = data
    },
  },
})

setup形式创建store

setup实际与react的hooks类似，规则也类似，都以use开头来定义。

export const useUserStore = defineStore('user', () => {
 const name = ref('管理员')
 function changeName(newName) {
   name.value = newName
 }

 return { name, changeName }
})

使用store存取值

取值

// 3. 直接使用 userStore.name
<template>
  <div class="test">用户名:{{ userStore.name }}<br />长度:{{ userStore.nameLength }}</div>
  <button @click="updateName">修改store中的name</button>
</template>

// 在setup中导包和定义
<script setup lang="ts">
// 1.导包
import { useUserStore } from '@/store/user'
// 2.定义
const userStore = useUserStore()
</script>

注意：不能直接解构 因为store 是一个用 reactive 包装的对象，如像下解构后将不是可变的。

const {count, changeName} = useUserStore();

如需结构需要用storeToRefs方法

<script setup lang="ts" >
import { storeToRefs } from 'pinia';
import { useUserStore } from '@/store/user'
// setup composition API模式 
const userStore = useUserStore(); 
// 解构属性
const { name } = storeToRefs(userStore); 
// 解构方法
const { changeName } = userStore; 
</script>

设置值

直接设值

store.name = '张三'

<template>
  <div class="test">用户名:{{ userStore.name }}<br />长度:{{ userStore.nameLength }}</div>
  <button @click="updateName">修改store中的name</button>
</template>

<script setup lang="ts">
import { useUserStore } from '@/store/user'
const userStore = useUserStore()

// ================================================//
// 设置值
const updateName = () => {
//可以通过 store 实例访问 state，直接对其进行读写。
 store.name = '张三' 
}
// ================================================//

</script>

也可以使用参数对象赋值

 userStore.$patch({
    name: '名称被修改了,nameLength也随之改变了',
  })

<template>
  <div class="test">用户名:{{ userStore.name }}<br />长度:{{ userStore.nameLength }}</div>
  <button @click="updateName">修改store中的name</button>
</template>

<script setup lang="ts">
import { useUserStore } from '@/store/user'
const userStore = useUserStore()

// ================================================//
// 设置值
const updateName = () => {
  userStore.$patch({
    name: '名称被修改了,nameLength也随之改变了',
  })
}
// ================================================//


</script>

$patch 经过优化的，会加快修改的速度，对与较大数据，或者多条数据修改的时候还是建议使用$patch

如

store.$patch({
  count: store.count + 1,
  age: 120,
  name: 'DIO',
})
参数为函数
store.$patch((state) => {
  state.items.push({ name: 'shoes', quantity: 1 })
  state.hasChanged = true
})

还能通过action修改

store.(action的方法名)

<template>
  <div class="test">用户名:{{ userStore.name }}<br />长度:{{ userStore.nameLength }}</div>
  <button @click="updateName">修改store中的name</button>
</template>

<script setup lang="ts">
import { useUserStore } from '@/store/user'
const userStore = useUserStore()

// ================================================//
// 设置值
const updateName = () => {
  userStore.insertPost('张三')
}
// ================================================//

reset值

你可以通过调用 store 的 $reset() 方法将 state 重置为初始值。

store.$reset()

注意

1.getter缓存 getter中返回的数据有缓存，如果每次返回数据没变化，下次调用getter将不走getter方法，而是直接从缓存中取。

this可直接访问 action和getter中均可以通过this直接取值