组件通讯与vuex

第一部分：组件通讯 1.父传子

父组件

2.子传父

父组件

子组件

第二部分：vuex

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式， 采用集中式存储管理应用的所有组件的状

态，解决多组件数据通信。最大的特点是数据响应式

Vuex 插件的安装

npm install --save vuex@3.6.2

 使用vuex的步骤

第一步：在 src 目录下新建 store 文件夹，创建 index.js文件引入、安装、创建并导出实例对象。

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

//1.安装插件
Vue.use(Vuex)

//2.创建对象
const store = new Vuex.Store({
// 第一核心成员：state定义全局共享的数据
// 访问方式1：组件内使用this.$store.state.counter
state: {
  counter: 1000
},
//第二个核心成员：mutations：专门修改state数据:
// mutations必须得是同步函数，不要在mutations中做异步 *** 作。
//为什么不能在组件中使用this.$store.state.属性名=属性值直接修改state的值呢？
// 原因：会导致修改来源不明确的问题，不利于调试和后期的维护
mutations: {
  // 内部函数的第一个参数永远是state，第二个参数可选
  // 访问方式：this.$store.commit("函数名",{obj})
  isAll(state, obj) {
    // console.log('你好', obj)
    // 例如让state中counter属性值+1
    state.counter += obj
  }
},
// 第三个核心成员：actions专门用来接收异步请求数据
//当actions接收到了数据，需要把数据先拿到mutations，用mutations把数据存入state
// 访问方式：this.$store.dispatch("函数名", 参数);
// 第一个函数名是在actions内定义的函数名，第二个参数可选
actions: {
  // context 对象帮助我们调用mutations中的函数
  addAsync(context, num) {
    setTimeout(() => {
      // console.log(num)
      // actions获取到了异步数据调用mutations内的函数存入state中
      // 语法： context.commit('mutations内函数名', 参数)
      context.commit('isAll', 50)
    }, 0)
  }
},
// 第四个核心成员：getters Vuex中的计算属性，可以所有组件共享使用
// 访问方式：this.$store.getters.函数名
getters: {
  // getters中的函数第一个参数永远都是state
  // 需要返回值，同计算属性
  issum(state) {
    // 计算state内的值然后return出去
    return state.counter + 100
  }
},
modules: {

}
})
//3.导出使用
export default store

第二步：和 vue-router 的使用方式一样，在 main.js 文件中挂载使用

import Vue from 'vue'
import App from './App'
import router from './router'
// 现在我要导入写好的vuex文件：它在store文件夹里
import store from './store/xxx.js'
 
Vue.config.productionTip = false
 
new Vue({
  router: router,
  store,
  render: h => h(App),
}).$mount('#app')

第五个核心成员modules:{    }

modules的使用

第一步:创建一个新的store文件

//新建store文件，设置默认导出
export default {
 namespced: true,
 // namespaced不写，默认为false，则在使用mutations时，不需要加模块名

 // 调用方法
 // 
{{this.$store.state.模块名.数据}}
 state() {
   return {
     num: 1
   }
 },
 // this.$store.commit('模块名/mutations名'，参数)
 mutations: {
 },
 // this.$store.getters['模块名/getter名']
 getters: {},
 // this.$store.dispatch('模块名/action名',参数)
 actions: {}
}

 第二步：在原来的store文件设置导入

import xxx from "路径";

第三步：

modules: {
//导入的文件名字
    xxx
}

扩展内容vuex辅助函数的使用

1.mapState的使用步骤
直接使用： this.$store.state.模块名.xxx; 
// 1. 导入辅助函数mapState，它是在vuex中定义的一个工具函数。
//  es6 按需导入 import { mapState } from 'vuex' 
import { mapState } from 'vuex'

computed: {
   // 说明1： ...对象 是把对象展开，合并到computed
   // 说明2： mapState是一个函数 
   //  ['数据项1'， '数据项2']
   ...mapState(['xxx'])，
   ...mapState({'新名字': 'xxx'})
}

2.getters的使用
直接使用：this.$store.getters.xxx 
在modules中直接使用getters:this.$store.getters['模块名/getter名']
computed: { 
  ...mapGetters(['xxx']), 
  ...mapGetters({'新名字': 'xxx'})
}

3.mutations的使用
直接使用：this.$store.commit('mutation名', 参数)
在modules中直接使用this.$store.commit('模块名/mutations名'，参数)
methods: { 
  ...mapMutations(['mutation名']), 
  ...mapMutations({'新名字': 'mutation名'})
}

4.如何使用modules中的mutations（namespaced:true）
直接使用： this.$store.commit('模块名/mutation名', 参数) 
methods: { 
  ...mapMutations('模块名', ['xxx']), 
  ...mapMutations('模块名',{'新名字': 'xxx'})
}

5.actions的使用
直接使用：this.$store.dispatch('action名', 参数)
methods: { 
  ...mapActions(['actions名']), 
  ...mapActions({'新名字': 'actions名'})
}

6.如何使用modules中的actions（namespaced:true）
直接使用： this.$store.dispatch('模块名/action名', 参数)
methods: { 
  ...mapActions('模块名', ['xxx']), 
  ...mapActions('模块名',{'新名字': 'xxx'})
}