一、初始认识
Vuex是一个专为Vue.js应用程序开发的状态管理模式。Vuex通过利用Vue.js强大的双向数据绑定机制，将组件状态的读取和分发放在一个全局Store中，从而方便了状态的共享和管理，避免了组件之间乱传参数或者累赘的事件通信。
Vuex主要由4个部分组成：State、Getter、Mutation与Action。在4.0中State获取方式有了部分变动，将Getter内的返回值直接返回。
二、状态管理上的新特性
1、Composition-Functions
export default {
name: "App",
setup() {
const count = ref(0);
return {
count,
increment() {
count.value++;
}
}
}
};
相对于Vue2.x+3.x的options-api，在Vue3.x及以上的版本实现了setup函数。其中使用的API就是CompositionAPI。CompositionAPI 是 Vue 的一个新功能，可以将组件逻辑提取到可重用的函数中，使组件更加易于阅读和维护。
2、TypeScript支持
interface YourState {
foo: string,
bar: number
}
export default createStore({
state() {
return {
foo: '',
bar: 0
}
},
mutations: {
setFoo(state, payload: string) {
state.foo = payload
},
setBar(state, payload: number) {
state.bar = payload
}
}
});
在Vuex4.0中全面支持TypeScript，这可以让开发者免受维护大型代码时的痛苦。使用TypeScript不仅可以帮助检测类型错误，还可以更好地组织代码。
3、响应式模块
import { reactive } from 'vue'
export default {
state: reactive({
name: 'John',
age: 28,
occupation: 'Web Developer'
})
}
在Vuex4.0中，可以直接使用“reactive”函数来处理模块状态。这意味着我们不再需要显式地将我们的位状态处理为一个对象，从而简化了我们的代码。相比3.x版本中使用”computed”、”watch”可以更清晰的获得当前的state。
三、使用Vuex4.0中的常见问题
1、在Nuxt.js中使用Vuex4.0
解决方法：
首先根据Nuxt.js高版本使用vue3，因此先安装Vue3版本的Vuex4.0。
npm install vuex@next --save
接着在Nuxt.js的plugins目录下新建一个vuex.js文件，初始化Vuex。
import { createStore } from 'vuex'
const store = createStore({
state() {
return {}
}
})
export default store
在nuxt.config.js文件中加入如下代码，实现全局引入刚刚初始化的Vuex。
export default {
//....
plugins: ['~/plugins/vuex.js']
}
2、在vite.js中使用Vuex4.0
解决方法：
在Vite.js中使用Vuex需要安装插件。
npm install @vitejs/plugin-vue -D
接着在/src/main.js中使用如下代码：
import { storeSymbol } from './store' // 引入定义的symbol
import { createApp } from 'vue'
import App from './App.vue'
const app = createApp(App)
app.use(storeSymbol) // 注入store
app.mount('#app')
四、总结
通过了解Vuex4.0的新特性，我们不难发现，在代码的可维护性及开发效率上，Vuex4.0有了很大的提升。主要表现在增加了对Composition-Functions、TypeScript、响应式模块等新特性的支持，从而大大提高了开发者的开发体验。同时，我们针对一些常见的问题，给出了解决方式，使大家在使用中可避免掉很多坑。相信随着Vuex4.0的不断完善，Vue.js的状态管理也会变得更加方便，更加高效。
原创文章，作者：PVCAM，如若转载，请注明出处：https://www.506064.com/n/331864.html
微信扫一扫 
支付宝扫一扫 