一、Vuex3.0
Vuex是一个专为Vue.js应用程序开发的**状态集中式管理库**,它遵循Flux设计模式(思想)。Flux源于Facebook,它强调单向数据流,使得数据流更加清晰,方便我们的开发和维护。 Vue3.0将会是Vuex3.0的一个重要组成部分。相比于Vuex2.x,Vuex3.0引入了一些新特性: 1. 支持TypeScript:Vuex3.0兼容了Typescript,使用者可以使用TypeScript对其进行开发,有了TypeScript的支持,Vuex3.0的类型定义更加准确,开发更加方便。 2. 支持Composition API:Composition API是Vue3.0中最重要的新特性之一,也允许我们在Vue中编写像React Hooks一样的逻辑,而在Vuex3.0中,我们也可以使用Composition API编写Vuex,让它的使用更加便捷,模块化组合也更加清晰。 3. 响应式状态:在Vuex3.0中,状态支持响应式,因此,当我们在任何地方修改状态时,不需要手动调用Vue.set()或Vue.delete()进行响应式更新,state更新可以自动更新视图。二、vuex
在Vuex中有以下几个重要的概念: * State:管理应用程序的状态。State对象可以在组件中访问,通过this.$store.state.x读取某个状态x的值。 * Getters:从State中派生出一些状态。Getters可以在组件中访问,通过this.$store.getters.x()读取某个状态x的派生状态。 * Mutations:更改State的唯一途径。Mutations必须是同步函数。 * Actions:类似于Mutations,用于异步更改State。Actions可以包含任意异步操作,但是最终还是需要通过Mutations进行同步操作来改变State。 * Modules:Vuex允许将Store分成多个模块。 下面是一个Vuex的基本用法,我们以计数器为例:// store.js import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) export default new Vuex.Store({ modules: {}, state: { count: 0 }, getters: { double: state => state.count * 2 }, mutations: { increment (state) { state.count++ } }, actions: { asyncIncrement ({ commit }) { setTimeout(() => { commit('increment') }, 1000) } } })
// Counter.vue<script> export default { computed: { count () { return this.$store.state.count }, double () { return this.$store.getters.double } }, methods: { increment () { this.$store.commit('increment') }, asyncIncrement () { this.$store.dispatch('asyncIncrement') } } } </script>Count: {{ count }}
Double: {{ double }}
三、vue
在Vue的组件中使用Vuex也非常简单,只需将Vuex Store附加到Vue实例中即可:// main.js import Vue from 'vue' import App from './App.vue' import store from './store' new Vue({ el: '#app', store, render: h => h(App) })
四、vue3
Vue3中对状态(State)管理进行了进一步的优化。在Vue3中,我们可以使用hook api来访问store对象:import { useStore } from 'vuex' import { computed } from 'vue' export default { setup () { const store = useStore() const count = computed(() => store.state.count) const double = computed(() => count.value * 2) const increment = () => store.commit('increment') const asyncIncrement = () => store.dispatch('asyncIncrement') return { count, double, increment, asyncIncrement } } }