Vue3—14—VueX

 

一、vuex就是状态管理

vuex五大核心:

  • state
  • getters
  • mutations
  • actions
  • modules

state即状态,其实我们的数据就是一种状态;

Vue3—14—VueX

 Vue3—14—VueX

 Vue3—14—VueX

 

 

 Vue3—14—VueX

 

 

 

 

二、vuex的使用

Vue3—14—VueX

 

 

 Vue3—14—VueX

 

 

 Vue3—14—VueX

 

 

 

 

 

 三、单一状态树和获取vuex的状态

使用单一状态树,即创建一个state实例,不要创建多个state;

 Vue3—14—VueX

 

三种方式:

  1. 直接在template组件模板中通过调用¥store获取
  2. 在optionApi中比如computed通过调用this.$store.sate获取
  3. 在compositionApi中使用setup()中使用

 

 Vue3—14—VueX

 

 

 Vue3—14—VueX

 

 

 

 四、getters

getters就像计算属性一样,不用加括号就可以取值了;

但如果取返回值是一个函数而不是普通的变量,可以+一个括号(),来执行这个函数;

Vue3—14—VueX

 

第二个参数是getters本身,传了这个参数,就可以在本函数中调用getters的其他函数;

 

 Vue3—14—VueX

 

但如果取返回值是一个函数而不是普通的变量,可以+一个括号(),来执行这个函数;

 

 Vue3—14—VueX

 

辅助函数去映射

 

 Vue3—14—VueX

 

 

 

 

 

五、mutations使用

更改 Vuex 的 store 中的状态的唯一方法是提交 mutation

mutations自动会传入state

 

 

Vue3—14—VueX

 

 

 有两种方式提交(触发)mutations

Vue3—14—VueX

 

 2. 使用【】来获取常量,动态定义函数;

 Vue3—14—VueX

 

 3.mapMutations辅助函数,来跟更快的获取vuex的mutation

 Vue3—14—VueX

 

上一篇:vuex中函数用法汇总


下一篇:关于vueX如何定义和使用