当前位置: 首页 > 科技观察

Vuex4快速入门入门

时间:2023-03-14 23:06:01 科技观察

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}}numself-add
2.2.使用场景2,通过useStore将store引入到组件中,然后对store进行操作。2.3、使用场景3多个值分别是在store中使用,store.state中的数据可以直接通过toRefs方法展开。3.getters的用法与前面的用法一致:conststore=createStore({state(){return{num:1,}},getters:{doubleNum(state){returnstate.num*2}},})//使用1:在模板中直接使用//使用2:使用计算属性得到4.mutations和actions的使用在mutations中调用方法时,使用commitcall。上面的使用场景2是mutations方法的调用。虽然操作异步更新状态中的数据,但仍然需要突变。可以通过this.$store属性访问store容器在组件中,使用组合API可以用useStore代替。其他用法基本相同。