10-Vuex

image

一、前言

如果你在使用 vue.js , 那么我想你可能会对 vue 组件之间的通信感到崩溃。

当子组件的数据和父组件按钮交互的时候 , 它们之间的通讯很麻烦。之所以这么麻烦 , 是因为父组件可以通过 props 给子组件传递参数 , 但子组件内却不能直接修改父组件传过来的参数。

如果想要在子组件中使用祖先组件中的数据, 那么就必须一层一层的传递(非常麻烦)
兄弟组件之间也不能直接传递数据, 如果兄弟组件之间想要传递数据, 那么就必须借助父组件(也非常麻烦)
例如:
试想这样的场景, 比如一个Vue的根实例下面有一个根组件名为 App.vue , 它下面有两个子组件A.vue和B.vue, App.vue想要与A.vue或者B.vue通讯可以通过props传值的方式, 但是如果A.vue和B.vue之间的通讯就很麻烦了, 他们需要共有的父组件通过自定义事件进行实现, A组件想要和B组件通讯往往是这样的:

image

A组件说: "报告老大, 能否帮我托个信给小弟B" => dispatch一个事件给App
App老大说: "包在我身上, 它需要监听A组件的dispatch的时间, 同时需要broadcast一个事件给B组件"
B小弟说: "信息已收到", 它需要on监听App组件分发的事件

这只是一条通讯路径, 如果父组件下有多个子组件, 子组件之间通讯的路径就会变的很繁琐, 父组件需要监听大量的事件, 还需要负责分发给不同的子组件, 很显然这并不是我们想要的组件化的开发体验.

Vuex就是为了解决这一问题出现的

二、什么是Vuex

vuex 是 Vue 配套的公共数据管理工具，我们可以将共享的数据保存到 vuex 中，
方便整个程序中的任何组件都可以获取和修改vuex中保存的公共数据。

必须在引入Vue之后再引入Vuex
只有需要共享的才放到vuex上, 不需要共享的数据依然放到组件自身的data上

Vuex的基本使用

导入Vuex

<!--在导入Vuex之前必须先导入Vue-->
<script src="js/vuex.js"></script>

创建Vuex对象

const store = new Vuex.Store({
    
});

三、Vuex的核心概念

1. State

state就是Vuex中的公共的状态, 我是将state看作是所有组件的data, 用于保存所有组件的公共数据。

如何通过State共享数据

创建Vuex对象

const store = new Vuex.Store({
    // 这里的state就相当于组件中的data, 就是专门用于保存共享数据的
    state: {
        msg: "共享数据"
    }
});

在祖先组件中添加 store 的 key 保存Vuex对象
只要祖先组件中保存了Vuex对象 , 那么祖先组件和所有的后代组件就可以使用Vuex中保存的共享数据了

store: store,

在使用Vuex中保存的共享数据的时候, 必须通过如下的格式来使用

<p>{{this.$store.state.msg}}</p>

2. mutations

在Vuex中不推荐直接修改共享数据，因为如果多个组件都修改了共享的数据, 那么后期数据发生了错误, 我们如果需要去调试错误，就需要把每一个修改了共享数据的组件都检查一遍, 这样非常低效, 非常的不利于我们去维护。

如何修改State中的数据

mutattions是一个对象，这个对象里面可以放改变state的初始值的方法，具体的用法就是给里面的方法传入参数state或额外的参数,然后利用vue的双向数据驱动进行值的改变

通过mutations是操作state的唯一办法

在执行mutations中定义的方法的时候, 系统会自动给这些方法传递一个state参数, state中就保存了共享的数据

const store = new Vuex.Store({
  state: {
    count: 1
  },
  // mutations: 用于保存修改共享数据的方法
  mutations: {
    increment (state) {// 这里面的参数除了state之外还可以再传额外的参数(变量或对象)
      // 变更状态
      state.count++
    }
  }
})

在组件中不能直接调用mutations中的方法, 需要通过store.commit方法调用

store.commit('increment')   //调用mutations的方法名称

3. getters

Vuex的getters属性就和组件的计算属性一样, 会将数据缓存起来, 只有数据发生变化才会重新计算。

const getters = {
    check(state){
        return state.count<0 ? 0 :state.count；
}

在调用的时候通过这种格式即可

this.$store.getters.check