import { defineStore } from 'pinia';
时间: 2024-12-14 11:14:13 浏览: 12
`import { defineStore } from 'pinia'` 是 Vue 3 中使用 Pinia 模块化状态管理库的一个导入语句。Pinia 是由Vue.js官方推荐的状态管理模式,它提供了一个简洁的方式来组织应用的状态管理,类似于 Vuex,但是更轻量级、更易于理解和使用。
`defineStore` 是 Pinia 提供的关键函数,用于创建一个 store (存储)。store 就是一个模块化的容器,可以存放应用程序的数据以及处理这些数据的操作(actions)。当你使用 `defineStore` 定义一个 store 时,需要传入一个命名空间字符串作为第一个参数,比如 `'counter'`,然后可以定义 state(状态)、mutations(状态更新处理器)、actions(异步动作)和 getters(计算属性)等。
例如:
```javascript
import { defineStore } from 'pinia';
export const useCounterStore = defineStore('counter', {
state () {
return {
count: 0,
}
},
mutations: {
increment (state) {
state.count++;
},
},
actions: {
async incrementAsync ({ commit }) {
// 异步操作
await someAsyncFunction();
commit('increment');
},
},
getters: {
getCount () {
return this.count;
},
},
});
```
在这个例子中,`useCounterStore` 可以在组件中通过 `inject` 或者 `useEffect` 注入到依赖它的组件中,以便访问和修改 counter 的状态。
阅读全文