### State
在
Pinia 中，state 是 Store 的核心部分，用于存储应用程序的状态。通常使用箭头函数来定义 state，以保证在服务器端和客户端都能正常使用，同时还能进行完整的类型推断。示例如下：
```typescript
import { defineStore } from '
pinia';
const useStore = defineStore('storeId', {
state: () => {
return {
counter: 0,
name: 'Eduardo',
isAdmin: true
};
},
});
```
在组件中使用 state 时，首先引入该 Store，然后调用 `useStore` 函数获取实例，并访问其 state 属性：
```vue
<template>
<div>
<p>Counter: {{ store.counter }}</p>
<p>Name: {{ store.name }}</p>
<p>Is Admin: {{ store.isAdmin }}</p>
</div>
</template>
<script setup>
import { useStore } from './store';
const store = useStore();
</script>
```
###
Getter
Getter 相当于组件中的计算属性，用于从 state 中派生出一些新的数据。在
Pinia 中，
Getter 是一个函数，接收 state 作为参数。示例如下：
```typescript
import { defineStore } from '
pinia';
const useStore = defineStore('storeId', {
state: () => ({
counter: 0
}),
getters: {
doubleCounter: (state) => state.counter * 2
}
});
```
在组件中使用
Getter 的方式与使用 state 类似：
```vue
<template>
<div>
<p>Counter: {{ store.counter }}</p>
<p>Double Counter: {{ store.doubleCounter }}</p>
</div>
</template>
<script setup>
import { useStore } from './store';
const store = useStore();
</script>
```
此外，也可以直接使用 `computed()` 创建计算属性来替代
Getter [^2]：
```typescript
import { computed } from 'vue';
import { useStore } from './store';
const store = useStore();
const doubleCount = computed(() => store.counter * 2);
```
### Action
Actions 相当于组件中的 methods，用于处理业务逻辑、
异步操作等。可以自由设置参数并返回任意类型的值，调用时会自动进行类型推断。示例如下：
```typescript
import { defineStore } from '
pinia';
const useStore = defineStore('storeId', {
state: () => ({
counter: 0
}),
actions: {
increment() {
this.counter++;
},
async fetchData() {
// 模拟
异步请求
const response = await fetch('https://api.example.com/data');
const data = await response.json();
return data;
}
}
});
```
在组件中调用 action：
```vue
<template>
<div>
<p>Counter: {{ store.counter }}</p>
<button @click="store.increment">Increment</button>
<button @click="fetchData">Fetch Data</button>
</div>
</template>
<script setup>
import { useStore } from './store';
const store = useStore();
const fetchData = async () => {
const data = await store.fetchData();
console.log(data);
};
</script>
```
同时，action 还可以访问其他 store 的内容，也可以进行订阅 [^3]。
本文探讨了如何在JavaScript中使用getter方法来定义和处理异步操作的action，重点关注了如何结合Promise或回调机制实现高效并发。作者可能还会涉及单例模式在管理异步行为中的应用。
扫一扫
1464
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
