-
在项目根目录创建store文件夹（此步骤和vuex相同）
-
在步骤一的store文件夹下根据不同的用途场景创建单独的store文件（等同于vuex中分模块）、
定义store基本步骤
步骤
- 导入defineStore()方法：
import {defineStore} from 'pinia' - 使用defineStore定义store并导出
import { defineStore } from 'pinia'
// 你可以对 `defineStore()` 的返回值进行任意命名，但最好使用 store 的名字，同时以use开头且以Store结尾。(比如 `useUserStore`，`useCartStore`)
// 第一个参数是你的应用中 Store 的唯一ID（因为pinia并没有vuex中模块的概念，每个文件就是单独一个模块了，所以id必唯一）。
// defineStore() 的第二个参数可接受两类值：Setup 函数或 Option 对象。
// 如果是一个对象，则可以使用选项式api来定义store（旧应用渐进式升级、vue2可使用这种方式，vue3建议用下面的组合式api方式）
// 如果是一个箭头函数，则可以使用组合式api来定义store,（推荐，因为vue3用的就是组合式api比较多。）
export const useAlertsStore = defineStore('alerts', {
// 其他配置...
})
定义store实例（组合式api）
定义一个用户相关的状态管理→store/user.js：
import {defineStore} from 'pinia'
import {ref} from 'vue'
// 你可以对 `defineStore()` 的返回值进行任意命名，但最好使用 store 的名字，
// 同时以 `use` 开头且以 `Store` 结尾。(比如 `useUserStore`，`useCartStore`，`useProductStore`)
// 第一个参数是你的应用中 Store 的唯一ID（因为pinia并没有vuex中模块的概念，每个文件就是单独一个模块了，所以id必唯一）。
// 第二个参数如果是一个对象，则可以使用选项式api来定义store（旧应用渐进式升级、vue2可使用这种方式，vue3建议用下面的组合式api方式）
// 如果是一个箭头函数，则可以使用组合式api来定义store,（推荐，因为vue3用的就是组合式api比较多。）
export const useUserStore = defineStore('user', {
// 选项式 store的使用方法：
// state和vuex不太一样，必须要返回一个函数，vuex中是一个对象属性。
state: () => {
return {
count: ref(12),
num: ref(100)
}
},
// 定义getters方式类似vuex
getters: {
doubleCount: (state) => {
return state.count * 2
}
},
// 也是类似vuex
actions: {
increCount() {
// pinia中因为action相当于组合了mutiation和actions，所以可以直接修改state中的数据。
// 在选项式api中actions访问state中的数据，是用this来直接访问的。
this.count++
}
}
})
定义store实例（选项式api）
// 使用类似vue3中的组合式api方式定义store
export const useUserStore2 = defineStore('user2', () => {
// 直接定义变量就是等同于定义state，比如这里用ref()定义响应式数据
const money = ref(888)
// 定义方法就是等同于定义actions
const increMoney = (value) => {
money.value += value
}
// 定义computed计算属性就是等同于定义getters
const doubleMoney = computed(()=>{
return money.value * 2
})
// 使用选项式api，必须要返回，否则外面用不到。
return {
money,
increMoney,
doubleMoney
}
})
在vue中使用store
- 导入自己编写的store
// 1. 导入store
import {useUserStore, useUserStore2} from './store/user';
- 实例化并用变量接收
// 2. 创建store实例
const userStore = useUserStore()
const userStore2 = useUserStore2()
- 引用store变量中的state、getters、actions
<template>
<div>hello pinia</div>
<!-- 引用store中的state、actions、getters -->
<p>userStore中的数据：{{ userStore.count }}</p>
<p>userStore中的数据：{{ userStore.doubleCount }}</p>
<button @click="userStore.increCount">自增+1</button>
<hr>
<p>userStore2中的数据：{{ userStore2.money }}</p>
<p>userStore2中的数据：{{ userStore2.doubleMoney }}</p>
<button @click="userStore2.increMoney(10)">钱+10</button>
</template>