Store是什么？
全局状态，用于在所有组件中，同步数据。
Store的应用场景?
在整个应用程序中访问的数据（且不需要被持久化），例如导航栏中显示的用户信息，以及需要通过页面保留的数据，例如一个非常复杂的多步骤表格。
pinia是什么？
简单一句介绍，vuex的升级版，抛弃了烦人的Mutation。
其他优点
- action支持同步和异步；
- 良好的TypeScript支持；
- 支持用插件扩展功能；
- 扁平架构，没有嵌套；
- 服务端渲染支持。
应用示例
下面我们以一个管理平台的员工账号信息为例，展示Pinia的使用方式。
本文作者认为setup是更好的组织代码的方式，所以都用setup编写下面的示例。
安装和挂载部分，直接看文档。
定义Store
代码语言：javascript复制import { defineStore } from 'pinia'
// 第一个参数是应用程序中 store 的唯一 id
export const useUserStore = defineStore('user', {
// other options...
})使用Store
代码语言：javascript复制import { useUserStore } from '@/stores/user'
export default {
setup() {
const userStore = useUserStore()
return {
// 您可以返回整个 store 实例以在模板中使用它
userStore,
}
},
}（如果习惯用选项式API，还是可以配合map helpers，声明各种map来访问store。）
获取store的响应式数据
直接解构会破坏响应式，需要用storeToRefs()提取属性并保持响应式。
import { storeToRefs } from 'pinia'
export default defineComponent({
setup() {
const userStore = useUserStore()
// ❌ 这不起作用，因为它会破坏响应式
// 这和从 props 解构是一样的
const { userName } = userStore
// 这样可以保持响应式
const { userId } = storeToRefs(userStore)
userName // "lucio"
userId // "001"
return {
// 一直会是 "lucio"
userName,
// 这将是响应式的
userId,
// 这将是响应式的
realUserName: computed(() => userStore.userName),
}
},
})State
返回初始状态的函数。
我们补全一下上面的定义Store部分的代码。
初始化
代码语言：javascript复制import { defineStore } from 'pinia'
// 第一个参数是应用程序中 store 的唯一 id
export const useUserStore = defineStore('user', {
state: () => {
return {
// 所有这些属性都将自动推断其类型
userName: 'lucio',
userId: '001',
}
},
})读取和写入state
- 通过store示例，可读写。
const userStore = useUserStore()
userStore.userId = '002'
userStore.$reset()
return { userStore }- 通过
$patch修改多个数据，参数可以是对象或者函数。
// 一次修改多个数据
userStore.$patch({
userId: '002',
userName: 'lucy',
})
// 适合对数组进行修改
userStore.$patch((state) => {
state.roles.push({ name: 'admin', priority: 1 })
})- 替换整个state
userStore.$state = { userId: '002', userName: 'lucy'}
// 或者通过pinia实例替换整个应用程序的状态
pinia.state.value = {}订阅state变化
可以通过 store 的 $subscribe() 方法查看状态及其变化，其只在patch之后触发一次。
默认情况下，组件卸载后，订阅会被删除。如果想保留，设置配置项detached为true。
代码语言：javascript复制userStore.$subscribe((mutation, state) => {
// import { MutationType } from 'pinia'
mutation.type // 'direct' | 'patch object' | 'patch function'
// 与 userStore.$id 相同
mutation.storeId // 'user'
// 仅适用于 mutation.type === 'patch object'
mutation.payload // 补丁对象传递给 to userStore.$patch()
// 每当它发生变化时，将整个状态持久化到本地存储
localStorage.setItem('user', JSON.stringify(state))
},
{ detached: true }, // detached为true，卸载组件后保留订阅
)Getters
返回状态的计算值。
定义getter
代码语言：javascript复制import { defineStore } from 'pinia'
// 第一个参数是应用程序中 store 的唯一 id
export const useUserStore = defineStore('user', {
state: () => {
return {
// 所有这些属性都将自动推断其类型
userName: 'lucio',
userId: '001',
}
},
getters: {
// 自动推断返回类型为字符串
userText: (state) => `User: ${state.userName}`,
// 也可以使用其他getter, 用this访问store实例，必须要定义返回类型
userTextPlus: (): string => `The name of ${this.userText}`,
}
})访问getter
直接用store的实例访问。
代码语言：javascript复制userStore.userText（getters也可以传递参数，不是很常用的场景，这里就不示例了。）
（在A store中，也可以使用B store的getter）
Actions
相当于组件中的methods，适合用于定义组件的业务逻辑。
定义action
下面我们继续补全上面的示例，在userStore中通过网络请求获取用户数据。
代码语言：javascript复制import { defineStore } from 'pinia'
export const useUserStore = defineStore('user', {
state: () => {
return {
userName: 'lucio',
userId: '001',
userData: null,
}
},
getters: {
// ...
},
actions: {
async loginAndGetUserInfo(password) {
try {
this.userData = await api.login({password});
showToast('Login success');
} catch(error) {
showToast(error);
return error;
}
}
}
})订阅action
可以使用 store.$onAction() 订阅 action 及其结果。
下面对userStore添加一个订阅，记录上面的登陆操作，所用的时间
const unsubscribe = userStore.$onAction(
({
name, // action 的名字
store, // store 实例
args, // 调用这个 action 的参数
after, // 在这个 action 执行完毕之后，执行这个函数
onError, // 在这个 action 抛出异常的时候，执行这个函数
}) => {
// 记录开始的时间变量
const startTime = Date.now()
// 这将在 `store` 上的操作执行之前触发
console.log(`Start "${name}" with params [${args.join(', ')}].`)
// 如果 action 成功并且完全运行后，after 将触发。
// 它将等待任何返回的 promise
after((result) => {
console.log(
`Finished "${name}" after ${
Date.now() - startTime
}ms.nResult: ${result}.`
)
})
// 如果 action 抛出或返回 Promise.reject ，onError 将触发
onError((error) => {
console.warn(
`Failed "${name}" after ${Date.now() - startTime}ms.nError: ${error}.`
)
})
}
)
// 手动移除订阅
unsubscribe()和订阅state一样，组件卸载时，订阅将被删除，可以添加设置第二个参数detach为true，在卸载组件后仍然保留订阅。
export default {
setup() {
const someStore = useSomeStore()
// 此订阅将在组件卸载后保留
someStore.$onAction(callback, true)
// ...
},
}
