vue系列——组件数据通讯

Posted 2020-09-06

VUEX: https://vuex.vuejs.org，官方文档先仔细看一遍，否则基础的东西不知道看下面的内容会吃力

关于vuex的使用场景，先抄官网一段话：

虽然 Vuex 可以帮助我们管理共享状态，但也附带了更多的概念和框架。这需要对短期和长期效益进行权衡。

如果您不打算开发大型单页应用，使用 Vuex 可能是繁琐冗余的。确实是如此——如果您的应用够简单，您最好不要使用 Vuex。一个简单的 global event bus 就足够您所需了。但是，如果您需要构建是一个中大型单页应用，您很可能会考虑如何更好地在组件外部管理状态，Vuex 将会成为自然而然的选择。

所以，简言之

项目简单就不用，利用 组件数据通讯（一）中讲到的知识点足够

如果你觉得有必要做一些全局状态管理，那就增加一个vuex.js文件

如果项目比较复杂，涉及到需要管理的全局状态模块较多，还需要引入vuex模块化，

 （一）基础实现

1. 首先写一份最简单的store单页模块

import Vue from ‘vue‘
import Vuex from ‘vuex‘
Vue.use(Vuex)

const user = {
    state: {
        name: ‘lilei‘
    },
    getters: {
        getName(state) {return state.name;}
    },
    mutations: {
        setName(state, name) {state.name = name;}
    },
    actions: {
        setName({ commit }, name) {commit(‘setName‘, name);}
    }
};

const store = new Vuex.Store(user)
export default store

　　state：状态对象，很类似全局变量，但它的状态存储是响应式的（驱动页面自动更新）

　　getters：对state处理后返回，相当于加工一层，在本例中其实没有做处理原样返回

　　mutations：这个对象的方法负责修改state

 　  actions：异步操作都通过这个对象方法，它自己是不能修改state的，而是通过调用mutation

2. 在根元素中引入store

import store from ‘./vuex‘

new Vue({
  el: ‘#app‘,
  // 把 store 对象提供给 “store” 选项，这可以把 store 的实例注入所有的子组件
  store,
  render: h => h(App)
})

　 Vuex 通过 store 选项，提供了一种机制将状态从根组件『注入』到每一个子组件中，简单说，我们在所有子组件都可以访问到store相关对象

3.子组件读取和操作store

　　3.1 通过this.$store调用

computed:{
    count () {
      return this.$store.state.count
    },
    countFromGetter () {
      return this.$store.getters.count
    }
},
methods:{    
    commit(){
      this.$store.commit(‘increment‘)
    },
    dispatch(){
      this.$store.dispatch(‘increment‘,str)
    }
}

　　3.2通过vuex提供的mapState,mapGetters,mapMutations,mapActions调用

import {mapState,mapGetters,mapMutations,mapActions} from ‘vuex‘

export default {  
  computed:{
    ...mapState([‘name‘]),
    ...mapGetters([‘getName‘])
　


  },
  methods:{
    ...mapActions([‘setName‘]),
    parentListener(){}
  }
}

　　这里直接使用对象扩展符去调用，注意.babelrc文件中要加入"stage-2"，不然不支持该特性

1. 读取state两种方式，直接读取和通过getters，getters相当于一个中间处理器

2. 操作state两种方式，mutations和actions，在子组件中两种方式都可以使用，比如如果简单的操作直接用mutations，涉及到异步或者复杂业务可以封装公用代码到actions里面；

另外：

mutations 有一个固有参数 state，接收的是 Vuex 中的 state 对象

action 也有一个固有参数 context，但是 context 是 state 的父级，包含  state、getters

　　如果希望取别名调用：

computed:mapState({
    count: state => state.count,

    // 传字符串参数 ‘count‘ 等同于 `state => state.count`
    countAlias: ‘count‘,

    // 为了能够使用 `this` 获取局部状态，必须使用常规函数
    countPlusLocalState (state) {
      return state.count + this.localCount
    }
  })
},

　　

 （二）模块化store

业务复杂的情况下，我们要做一个store的模块化，否则所有的状态全堆在一个sotre中，可想而知会怎样。。

下面介绍的模块化方法承袭官方推荐：

1. index.js

import Vue from ‘vue‘
import Vuex from ‘vuex‘
import * as actions from ‘./actions‘
import * as getters from ‘./getters‘
import a from ‘./modules/a‘
import b from ‘./modules/b‘

Vue.use(Vuex)

export default new Vuex.Store({
  actions,
  getters,
  modules: {
    a,
    b
  }
})

　　这个整个store模块的入口文件，做一个所有模块的整合再export出去；

这里面有个所谓全局的getters和actions，如果没有也可以不加；模块内部的 action、mutation、和 getter 仍然注册在全局命名空间，所以其实任何子组件都是可以调用所有模块的store

2. mutations-types.js 

这个js就是定义一些常量

export const CHANGE_A = ‘CHANGE_A‘
export const CHANGE_B = ‘CHANGE_B‘

3. 两个案例模块，a.js/b.js

import * as types from ‘../mutation-types‘

// initial state
const state = {
  aa:‘aa‘
}

// getters
const getters = {
  aa: state => `from getters:${state.aa}`
}

// actions
const actions = {
  addStringA ({ commit, state }, str) {
    commit(types.CHANGE_A, { str })
  }
}

// mutations
const mutations = {
  [types.CHANGE_A] (state, { str }) {
    state.aa += str
  }
}

export default {
  state,
  getters,
  actions,
  mutations
}

　　这里就是一个模块的store，可以看到和我们上面的单页面vuex.js很像

4. 子组件调用

<template>
  <div id="app">
    <myHeader></myHeader>
    <div id="container" @click="addStringA(‘nnnn‘)">
    {{aa}}=={{bb}}
    </div>
  </div>
</template>

<script>
import {mapState,mapGetters,mapMutations,mapActions} from ‘vuex‘

export default { 
  name:‘app‘,  
 
  computed:{  
    ...mapGetters([
                 ‘aa‘,‘bb‘
    ]),   
    promotionInfo(){}
  },
  methods:{ 
    // ...mapActions([
    //              ‘Gaction‘,‘addStringA‘
    // ]),
    addStringA(str){
      this.$store.dispatch(‘addStringA‘, str)
    }
  }
}
</script>

　　在methods里面，分别用mapActions和dispatch的方式触发action，结果都是一样的