vue中的组件通讯与vuex

第一部分：组件通讯

1.父传子

父组件

<template>
 <div>
   <h2>根组件</h2>
   <!-- (3)使用 -->
   <!-- 父传子数据 -->
   <Vuexson a="1" :b="c" />
 </div>
</template>
<script>
// 需求：父子组件通讯
// (1)导入子组件
import Vuexson from "./VuexThesaurus/Vuexson.vue";
export default {
 data() {
   return {
     c: 2,
   };
 },
 components: {
   // (2)注册
   Vuexson,
  },
};

子组件

<template>
 <div>
   <h3>子组件</h3>
   {{ a }}{{ b }}
 </div>
</template>

<script>
export default {
 props: ["a", "b"],
};
</script>

2.子传父

父组件

<template>
 <div>
   <h2>根组件</h2>
   <!-- (3)使用 -->
   <!-- 父传子数据 -->
   <Vuexson @abc="fn" />
   <button>点我</button>
 </div>
</template>
<script>
// 需求：父子组件通讯
// (1)导入子组件
import Vuexson from "./VuexThesaurus/Vuexson.vue";
export default {
 methods: {
   fn(vl) {
     console.log(vl);
   },
 },

 components: {
   // (2)注册
   Vuexson,
 },
};
</script>

子组件

<template>
 <div>
   <h3>子组件</h3>
 </div>
</template>

<script>
export default {
 data() {
   return {
     sum: 100,
   };
 },
 created() {
   this.$emit("abc", this.sum);
 },
};
</script>

 v-model父子组件传值

在父组件

父组件
<template>
  <div>
    <HelloWorld v-model="a"/>
    {{a}}
  </div>
</template>

<script>
组件已经全局注册
export default {
  name: 'App',
  data(){
    return {
      a:1
    }
  }
}
</script>

 在子组件

<template>
  <div >
    <button @click="fn">点我修改a</button>
  </div>
</template>
<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String,
    value:{

    }
  },
  methods:{
    fn(){
      // eslint-disable-next-line vue/no-mutating-props
      this.$emit('input',2)
    }
  }
}
</script>

 sync修饰符

在父组件中

<template>
  <div>
    <HelloWorld :abc.sync="abc"/>
    {{abc}}
  </div>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
  name: 'App',
  data(){
    return {
      abc:123
    }
  },
  components: {
    HelloWorld
  }
}
</script>

 在子组件中

<template>
  <div >
    <button @click="fn">点我修改a</button>
    {{value}}
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    value:{

    },
  },
  methods:{
    fn(){
      this.$emit('input',2)
    }
  }
}
</script>

第二部分：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时，不需要加模块名

 // 调用方法
 // <p>{{this.$store.state.模块名.数据}}</p>
 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'})
   //在mutations的使用
    ...mapState('模块名', ['数据名']),
}

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