vue3 状态、Vuex 4 / Pinia
Vuex 4
Vuex 4 是 Vue.js 官方推出的状态管理库,它提供了一种集中式管理应用程序中所有组件的状态的方式。Vuex 4 增强了 TypeScript 支持,还引入了一些新的概念,如模块化和插件化,使状态管理更加灵活和可维护。
Vuex 4 的核心概念包括:
- State:状态,即应用程序中需要共享的数据,类似于组件中的 data。
- Getters:用于从 state 中派生出其他状态的方法,类似于组件中的计算属性。
- Mutations:用于修改 state 中的数据的方法,但必须是同步的,类似于组件中的 methods。
- Actions:用于执行异步操作和提交 mutations 的方法,类似于组件中的 methods,但可以执行异步操作。
- Modules:用于将 store 分成多个模块,每个模块拥有自己的 state、getters、mutations 和 actions。 以下是一个简单的 Vuex 4 store 示例:
import { createStore } from 'vuex'
export default createStore({
state: {
count: 0
},
getters: {
doubleCount(state) {
return state.count \* 2
}
},
mutations: {
increment(state) {
state.count++
}
},
actions: {
asyncIncrement(context) {
setTimeout(() => {
context.commit('increment')
}, 1000)
}
},
modules: {
// ...
}
})
在组件中,可以通过 useStore 函数来获取 store 的实例,然后通过 computed 或 methods 属性来访问状态或提交 mutations 和 actions:
import { useStore } from "vuex"
export default {
setup() {
const store = useStore()
const increment = () => {
store.commit("increment")
}
const asyncIncrement = () => {
store.dispatch("asyncIncrement")
}
return {
count: computed(() => store.state.count),
doubleCount: computed(() => store.getters.doubleCount),
increment,
asyncIncrement,
}
},
}
需要注意的是,在 Vue 3 中,组件的 data、computed 和 methods 属性都已经被废弃,被 setup() 函数所代替。因此,在使用 Vuex 4 时,应该使用 setup() 函数中的 computed 和 methods 属性来访问状态和提交 mutations 和 actions。
除了 Vuex 4,Vue 3 还可以使用 Pinia 这个轻量级的状态管理库来管理应用的状态。要使用 Pinia,需要先安装并导入它 Pinia 速查表
import { createApp } from "vue"
import { createPinia } from "pinia"
const app = createApp({})
const pinia = createPinia()
app.use(pinia)
接下来,可以创建一个 Pinia Store:
import { defineStore } from "pinia"
export const useCounterStore = defineStore("counter", {
state: () => ({
count: 0,
}),
actions: {
increment() {
this.count++
},
},
getters: {
doubleCount() {
return this.count * 2
},
},
})
在上面的代码中,defineStore 函数定义了一个名为 counter 的 Store,state 函数中存储了应用的状态,actions 对象中存储了修改状态的方法,getters 对象中存储了对状态的计算属性。这些对象都可以通过 useCounterStore 函数进行访问。
在组件中,可以使用 useStore 函数来访问 store 对象:
import { useCounterStore } from "./store"
export default {
setup() {
const store = useCounterStore()
const increment = () => {
store.increment()
}
return {
count: store.count,
doubleCount: store.doubleCount,
increment,
}
},
}
在上面的例子中,使用 useCounterStore 函数获取了 store 对象,然后可以通过 store 对象访问状态、修改状态等等。与 Vuex 4 不同的是,在 Pinia 中,可以使用类似于 Vue 2 中的 data、computed、methods 等属性来组织组件代码,而不需要使用 setup 函数。
需要注意的是,与 Vuex 4 不同的是,在 Pinia 中,状态的更新是同步的,不需要使用 commit 方法。此外,Pinia 还提供了许多钩子函数和选项,可以帮助开发者更方便地管理状态。