简单认识Vuex

(Why)为什么使用Vuex?

组件间通信

  • 父子通信
    • 父→子:props
    • 子→父:events($emit)
  • 兄弟通信:eventBus
  • 跨级通信:eventBus

不同组件间通信常用的方式如上所示,详细总结请看:https://blog.csdn.net/xicc1112/article/details/106211934

以上方式只适合在小范围内来进行数据的共享,如果需要频繁的、大范围的实现数据的共享会显得力不从心。使用Vuex操作可以方便的实现组件之间数据的共享。

Vuex

在这里插入图片描述
图源自网络
如上图所示,若想实现标号1组件与标号2组件之间的通信,按照往常的做法需要通过父组件,兄弟组件等来进行。而Vuex就相当于在组件旁边定义一个共享的状态对象STORE,标号1组件将需要共享的数据存储在STORE中,标号2组件则可以直接从STORE中获取数据,不再需要进行复杂的传递。

(What)什么是Vuex?

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。

简单的说,Vuex是实现组件数据管理的一种机制,这种机制要求将想要共享的数据放到STORE中的State中存储,通过Mutation进行数据变更,通过在Action中触发Mutation处理异步操作。

(How)如何使用Vuex?

开始

  1. 安装vuex依赖包
npm install vuex --save
  1. 导入vuex包
import Vuex from 'vuex'
Vue.use(Vuex)
  1. 创建store对象
const store = new Vuex.Store({
  state: {},
  mutations: {},
  actions: {},
  getters: {},
})
  1. store对象挂载到vue实例中
new Vue({
  el: '#app',
  store
})

核心概念

State

所有共享的数据统一放到Store的State中进行存储
定义共享数据:

export default new Vuex.Store({
  state: {
    count: 0
  }
})

组件访问共享数据的两种方式:

  1. store.state.count
<template>
  <div>
    <h3>当前的count值为:{{ $store.state.count }}</h3>
  </div>
</template>
  1. mapState
    vuex中按需导入mapState函数,通过导入的函数,将需要的数据映射为当前组件的计算属性
import { mapState } from 'vuex'
export default {
  data() {
    return {}
  },
  computed: {
    ...mapState(['count'])
  }
}

Getter

Getter用于对Store中的数据进行加工处理形成新的数据。Getter不会修改Store中的原数据,它只是起到“包装器”的作用,将Store中的数据变一种形式然后返回。
定义Getter

export default new Vuex.Store({
  state: {
    count: 0
  },
  getters: {
    showNum(state) {
      return '当前最新的数量是' + state.count
    }
  }
})

使用Getter的两种方式:

  1. store.getters.showNum
<template>
  <div>
    <h3>{{ $store.getters.showNum }}</h3>
  </div>
</template>
  1. mapGetters
import { mapGetters } from 'vuex'
export default {
  data() {
    return {}
  },
  computed: {
    ...mapGetters(['showNum'])
  }
}

Mutation

Mutation用于变更Store中的数据。
【!!注意:在Vuex中只能通过Mutation变更store数据,不可以直接操作Store中的数据。】

定义Mutation

export default new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    add(state) {
      state.count++
    }
  }
})

触发Mutation的两种方式

  1. store.commit
<template>
  <div>
    <h3>当前的count值为:{{ $store.state.count }}</h3>
    <button @click="btnHandler1">+1</button>
  </div>
</template>
<script>
export default {
  data() {
    return {}
  },
  methods: {
    btnHandler1() {
      this.$store.commit('add')
    }
  }
}
</script>

store.commit触发mutations时可以携带参数

 this.$store.commit('addN', 3)

此时在定义mutations函数期间对应要添加两个参数,第二个参数即传进来的参数

  mutations: {
    addN(state, step) {
      state.count += step
    },
  1. mapMutations
    vuex中按需导入mapMutations函数,将需要的mutations函数,映射为当前组件的methods方法
import { mapState, mapMutations } from 'vuex'
export default {
  data() {
    return {}
  },
  computed: {
    ...mapState(['count'])
  },
  methods: {
    ...mapMutations(['add'])
  }
}

Action

Mutation 必须是同步函数,如果要处理异步任务则要使用Action。但是不能直接触发Action来变更数据。我们可以通过在Action中触发Muation间接变更数据。

定义Action

Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象,因此你可以调用 context.commit 提交一个 mutation

export default new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    add(state) {
      state.count++
    }
  },
  actions: {
    addAsync(context) {
      setTimeout(() => {
        context.commit('add')
      }, 1000)
    }
  }
})

触发Action的两种方式

  1. this.$store.dispatch(‘addAsync’)
<template>
  <div>
    <h3>当前的count值为:{{ $store.state.count }}</h3>
    <button @click="btnHandler">+1 Async</button>
  </div>
</template>
<script>
export default {
  data() {
    return {}
  },
  methods: {
    btnHandler() {
      this.$store.dispatch('addAsync')
    },
  }
}
</script>
  1. mapAction
import { mapState, mapActions } from 'vuex'
export default {
  data() {
    return {}
  },
  computed: {
    ...mapState(['count'])
  },
  methods: {
    ...mapActions(['addAsync'])
  }
}

以上为视频学习过程的笔记和一些简单的理解,若有不足和错误欢迎批评指正。
具体还是要看官方文档:https://vuex.vuejs.org/zh/。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值