美文网首页Vue
Vuex 跨组件通信

Vuex 跨组件通信

作者: Grayly吖 | 来源:发表于2019-05-08 21:38 被阅读231次

    Vuex 跨组件通信

    一、\color{red}{Vuex}是什么?有什么用?什么时候用?

    1、\color{red}{Vuex}是vue.js中管理数据状态(变量)的一个库,通过创建一个集中数据存储,来供所有组件访问
    • 特点
      • (1)每一个Vuex应用的核心就是store(仓库),store基本上就是一个容器,它包含着应用中大部分的状态(state)

        • store本质是对象
        • state本质是变量
      • (2)Vuex的状态存储是响应式的(即 一个组件对state的状态进行修改,其他组件对state的状态引用也会跟着发生改变)

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

    2、\color{red}{Vuex}可用于跨组件通信
    3、当组件不是父子关系的时候可以使用

    二、\color{red}{Vuex}的核心概念

    1、state:是一个对象,里面存放我们需要用的变量
    2、getter:用于获取state里面的变量(非必须,用了会更方便)
    • 需要一个参数,参数为state
    3、mutation:用于改变state里面的状态
    • 第一个参数为state,第二参数为修改的值
    • \color{red}{Mutation 必须是同步函数}
    4、action:(动作)用于提交(commit)mutation
    • 第一个参数用于接收与store相同的属性和方法,第二参数为修改的值
    • \color{red}{Action 可以包含任意异步操作}:例如可用于发送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'
    

    三、\color{red}{Vuex}配置

    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
                }
            })
    

    四、\color{red}{Vuex}存取

    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"])
              },
    

    相关文章

      网友评论

        本文标题:Vuex 跨组件通信

        本文链接:https://www.haomeiwen.com/subject/brxboqtx.html