vuex4是vue3的兼容版本,提供与vuex3相同的API。所以我们可以复用vue3中已有的vuex代码。1.安装初始化vuex4安装:npminstallvuex@next为了与vue3的初始化方式保持一致,对vuex4的初始化方式进行了相应的改动,使用新的createStore函数创建新的store实例。import{createApp}from'vue'importAppfrom'./App.vue'importrouterfrom'./router'import{createStore}from"vuex"conststore=createStore({state(){return{num:1,}}})constapp=createApp(App)app.use(router)app.use(store)app.mount('#app')//在组件内部使用时同上
{{$store.state.num}}
二、vuex4在组件中的使用2.1,使用场景1直接在组件的template中使用,与前面的api一致//conststore=createStore({state(){return{num:)inmain.js1,}},mutations:{addNum(state){state.num++}},actions:{},modules:{}})//{{$store.state.num}}
2.2.使用场景2,通过useStore将store引入到组件中,然后对store进行操作。store组件{{state.num}}
2.3、使用场景3多个值分别是在store中使用,store.state中的数据可以直接通过toRefs方法展开。{{num}}
3.getters的用法与前面的用法一致:conststore=createStore({state(){return{num:1,}},getters:{doubleNum(state){returnstate.num*2}},})//使用1:在模板中直接使用{{$store.getters.doubleNum}}//使用2:使用计算属性得到{{getDouble}}
4.mutations和actions的使用在mutations中调用方法时,使用commitcall。上面的使用场景2是mutations方法的调用。虽然操作异步更新状态中的数据,但仍然需要突变。{{state.num}}
可以通过this.$store属性访问store容器在组件中,使用组合API可以用useStore代替。其他用法基本相同。