Vuex简介
复习以下常见组件之间共享数据的方式:
父向子传值:v-bind 属性绑定
子向父传值:v-on 事件绑定
兄弟组件之间共性数据:EventBus. $on接受数据的那个组件,$emit发送数据的那个组件。
但是当我们的运用遇到多个组件共享状态时,多层嵌套的组件就会变得很繁琐(如下左图所示),维护相当困难。于是我们就想到了把组件共享的数据状态抽取出来,以一个全局单例模式管理(如下左图所示)。
虽然 Vuex具有集中管理共享的数据,高效地实现组件之间数据共享,存储在vuex中的数据都是响应式的的优点。然而当我们的应用够简单时,就不要使用 Vuex。如果需要构建一个中大型单页应用,考虑如何更好地在组件外部管理状态,Vuex 将会成为自然而然的选择。
VueX的简单运用
1. 安装并导入VueX包:参考官网 安装 | Vuex
安装完之后会新增一个store文件夹及index.js文件,并在main.js中引入和挂载。如下所示
state节点:state提供唯一的公共数据源,所有共享的数据都要统一放到state中进行存储
访问state节点使用的方法:
方法一:在子组件中通过:this.$store.state.
方法二: 从vuex中按需映入mapState函数,将全局数据映射为组件的计算属性
(注意:state中的数据只能通过mutation 变更,不可以直接操作)
<template> <div> <!-- 方法一 --> <h3>当前count的最新值为:{{$store.state.count}}</h3> <h3>当前count的最新值为:{{count}}</h3> </div> </template> <script> // 方法二 import { mapState } from 'vuex' export default { computed: { ...mapState(['count']) } } </script>
Mutation节点: Vuex 的 store 中的状态的唯一方法是提交 mutation。 mutation 非常类似于事件:每个 mutation 都有一个字符串的事件类型 (type)和一个回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方,并且它会接受 state 作为第一个参数.
(mutation 中执行同步操作。异步操作可以放到action中)
触发mutation的方法:
方法一:
不带参数:this.$store.commit('add')
携带参数:this.$store.commit('add', n) (大多数情况下参数是一个对象)
方法二:通过从vuex中按需映入mapMutation函数,将指定的mutation,映射为当前组件的methods函数
Action节点:Action 类似于 mutation,不同在于:Action 提交的是 mutation,而不是直接变更状态。Action 可以包含任意异步操作。
触发action节点方法:
方法一:this.$store.dispatch
方法二:通过从vuex中按需映入mapAction函数,将指定的mutation,映射为当前组件的methods函数
Getter节点:getter用于对store中的数据进行加工处理 形成新的数据。不会修改原数据 起到包装作用访问getter节点:
方法一: $store.getters.
方法二:从vuex中按需映入mapState函数,将全局数据映射为组件的计算属性