Vuex 的辅助函数 defineStore()
时间: 2024-05-09 12:14:26 浏览: 148
`defineStore()` 是 Vuex 4 中的一个辅助函数,用于创建一个 Vuex store。它可以让你使用更简洁的方式来定义 state、mutations、actions 和 getters,而不需要手动创建一个 Vuex store 对象。
下面是一个使用 `defineStore()` 创建 Vuex store 的例子:
```javascript
import { defineStore } from 'vuex'
const store = defineStore({
state: () => ({
count: 0
}),
mutations: {
increment(state) {
state.count++
}
},
actions: {
incrementAsync(context) {
setTimeout(() => {
context.commit('increment')
}, 1000)
}
},
getters: {
doubleCount(state) {
return state.count * 2
}
}
})
export default store
```
上面的代码中,我们使用 `defineStore()` 创建了一个名为 `store` 的 Vuex store,其中包含了一个 `count` 状态、一个 `increment` mutation、一个 `incrementAsync` action 和一个 `doubleCount` getter。可以看到,使用 `defineStore()` 可以让我们更加简洁地定义 Vuex store,同时也使代码更加易读易维护。
阅读全文