Vuex 跨组件通信

Vuex 跨组件通信

一、是什么？有什么用？什么时候用？

• 文档地址：https://vuex.vuejs.org/zh/

1、是vue.js中管理数据状态（变量）的一个库，通过创建一个集中数据存储，来供所有组件访问

• 特点

  • （1）每一个Vuex应用的核心就是store（仓库），store基本上就是一个容器，它包含着应用中大部分的状态（state）

    • store本质是对象
    • state本质是变量

  • （2）Vuex的状态存储是响应式的（即 一个组件对state的状态进行修改，其他组件对state的状态引用也会跟着发生改变）

  • （3）不能直接改变store中的状态（state），改变store中的状态的唯一途径就是显式地提交（commit）mutation

2、可用于跨组件通信

3、当组件不是父子关系的时候可以使用

二、的核心概念

1、state：是一个对象，里面存放我们需要用的变量

2、getter：用于获取state里面的变量（非必须，用了会更方便）

• 需要一个参数，参数为state

3、mutation：用于改变state里面的状态

• 第一个参数为state，第二参数为修改的值

4、action：（动作）用于提交（commit）mutation

• 第一个参数用于接收与store相同的属性和方法，第二参数为修改的值
• ：例如可用于发送ajax请求数据

5、module：（模块）项目需要用到state的变量很多的情况下，使用module来拆分（非必须，用了便于维护）

（1）定义模块：模块也会拥有state、getters、mutattions、actions、modules
（2）模块导出：在模块中定义完成后，通过export default 导出

        /**
         * 配置关于城市的vuex
         */
        const state = {
            cityName: ''
        }
        const getters = {
            cityName: state => state.cityName
        }
        const mutations = {
            updateCity(state, payload) {
                state.cityName = payload
            }
        }
        export default {
            state,
            getters,
            mutations
        }

（3）模块导入：

        //导入城市的modules
        import city from './modules/city'

三、配置

1、安装Vuex

        npm i vuex --save

2、配置Vuex

        import Vue from 'vue';
        import Vuex from 'vuex';
        //导入城市的modules
        import city from './modules/city'
        Vue.use(Vuex)
        1、定义state
        const state = {
            msg: 'hello world',
        }
        2、定义getters，用于获取state，需要一个参数，参数为state
        const getters = {
            msg: state => state.msg
        }
        3、定义mutation,用于修改state，第一个参数为state，第二参数为修改的值
        const mutations = {
            updateMsg(state, payload) {
                state.msg = payload
            }
        }
        4、定义action，commit =》 mutation，第一个参数用于接收与store相同的属性和方法，第二参数为修改的值
        const actions = {
            updateMsg(context, payload) {
                context.commit('updateMsg', payload)
            }
        }
        5、导出vuex实例
        export default new Vuex.Store({
            state,
            getters,
            mutations,
            actions,
            modules: {
               city
            }
        })

四、存取

1、定义变量：在state里面定义变量

          eg：  isLogin：false

2、存（修改）变量

$store（派发dispatch） ==> action （提交commit）==> mutation （修改）==> state里面的值

  methods: {
    changeMsg() {
      （第一种、dispatch（派发）action）
      this.$store.dispatch("updateMsg", this.text);

      （第二种、直接commit （提交）mutation）
      this.$store.commit("updateMsg", this.text);
    }
  }

3、取

• （1）直接取

          this.$store.state.msg

• （2）通过getter来取（module中的状态也可以直接映射获取）
  • 第一步：使用mapGetters把state里面的值映射到data里，然后就可以通过this来调用

         import { mapGetters } from "vuex";

• 第二步：把值放入computed里

          computed: {
                ...mapGetters(["msg"])
          },