vuex-通信

简介

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

下载

1.方式一： 安装项目时选择即可， 会自动在项目中配置

2.方式二： 命令下载， 需手动配置

（1）下载

    npm install vuex@next --save                  // 下载

（2）配置 main.js

执行流程

1.文字说明

1. 在state中定义变量

2. 在组件中通过this.$store.dispatch('actions中定义的函数名')， 触发actions中得函数执行。

3. 在actions中得函数中，调用 context.commit('mutations中定义的函数名')， 触发mutations中得函数执行。

4. 在mutations中定义的函数实现真正的修改state中得数据

5. 页面中只要使用$store.state.变量，变量变化，页面就变化 实现了组件间通信

2.流程图

代码展示

组件1：------> 通过此组件传递参数

<template>
    <div id="login">
        <button @click="handleClick1">点我</button><span>我是组件1</span>
        <input type="text" v-model="num1">
        <input type="text" v-model="num2">
        <p>{{ this.$store.state.sum }}</p>
    </div>
</template>
<script>
export default {
    data() {
        return {
            num1: '',
            num2: ''
        }
    },

    methods: {
        handleClick1() {
//   ----------------------1. 通过this.$store.dispatch('actions中定义的函数名'， { 需要传递的参数--> 可以构建成一个对象 })-----------------------------------------
            this.$store.dispatch('addNumber',{num1:Number(this.num1), num2:Number(this.num2)})
        },
    },
}

store/index.js：------> 相当于中间介 存储和处理数据的地方

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    sum: ''
  },
  getters: {
  },
  mutations: {
// --------------------------4. 对数据进行处理----------------
    increment(state, args) {
      //---------------------5. 将数据传递给 state ,供其他组件使用
      state.sum = args['num1'] + args['num2']
    }
  },
  actions: {

    // 2. 参数一： 固定参数 （context） 参数二： 组件一中传来的参数
    addNumber(context, args) {
      // ----3. 调用 context.commit('mutations中定义的函数名')， 触发mutations中得函数执行------
      context.commit('increment', args)
    }
  },
  modules: {
  }
})

组件二： 访问传递的数据

<template>
    <div id="home">
        <p>我是组件2</p>
        <p>{{ this.$store.state.sum }}</p>                    // 6.  通过 this.$store.state 访问数据
    </div>
</template>