Vuex4快速入门入门

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')//在组件内部使用时同上

二、vuex4在组件中的使用2.1，使用场景1直接在组件的template中使用，与前面的api一致//conststore=createStore({state(){return{num:)inmain.js1,}},mutations:{addNum(state){state.num++}},actions:{},modules:{}})//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代替。其他用法基本相同。