vuex api的用法

掌握工作中Vuex核心API用法以及基本原理
Vuex是什么
Vuex是Vue的状态管理工具,为了更方便实现多个组件共享状态。
在这里插入图片描述
Vuex的特点:
Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候,若 store 中的状态发生变化,那么相应的组件也会相应地得到高效更新。
你不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状态的变化,从而让我们能够实现一些工具帮助我们更好地了解我们的应用。
Vuex核心功能点
我们使用Vue脚手架创建一个项目作为本次演练的开发环境。

vue create vuex-demo

复制代码
注意:生成项目的时候,记得选中vuex,避免后面手动安装vuex并导入到main.js中。
State
第一步:在仓库store中定义需要全局共享的state变量

state: {
   
   age: 25
}

复制代码
第二步:在对应的组件中获取并显示在页面上

<p>{
   {
   $store.state.age}}</p>

复制代码
Getters
getters相当于组件中的computed计算属性。当state中定义的数据发送变化后,getters中的数据会自动跟着变化。
第一步:在仓库store中定义好getters

getters: {
   
   getAge(state) {
   
      return state.age + 1;
   }
}

复制代码
第二步:在对应的组件中获取并显示在页面上

<p>{
   {
   $store.getters.getAge}}</p>

复制代码
Mutations
第一步:在仓库store中定义需求调用的mutation方法

mutations: {
   
   incre(state, payload) {
   
      state.age += payload.age;
   }
}

复制代码
注意:参数payload可以是对象。
第二步:在对应组件中定义触发更改状态的模板和方法
// template

<button @click="add">增加</button>

// script

methods: {
   
   add() {
   
      this.$store.commit('incre', {
   age: 1});
   }
}

复制代码
注意:'incre’名称一定要和mutations中定义的名称一样。
Actions
第一步:在仓库store中定义需求调用的mutation方法

actions: {
   
   increAsyn({
   commit}, payload) {
   
      commit('incre'
  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值