组件通信(Vuex)

组件通信

https://vuex.vuejs.org/zh/

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式

vuex状态管理 --> 组件数据流动 -->数据管理

vue的全局数据池，在这里它存放着大量的复用或者公有的数据，然后可以分发给组件

vue双向数据绑定的MV框架，数据驱动(区别节点驱动)，模块化和组件化

路由(router)–>管理的是组件
Vuex–> 管理的是数据

Vuex的一个前端非持久化的数据库中心，Vuex其实是Vue的重要选配，小型不怎么用，大型项目运用比较多

注意点:页面刷新，数据池会重置

组件数据来源

• ajax请求后端
• 定义默认数据，写死
• 从vuex拿

安装

安装必须的依赖

yarn add vuex --save

五大概念

• State 池 (数据源)
• Getter 查 (获取数据源的数据)
• Mutation 改 (真正修改的动作)
• Action 触发修改行为
• Module 可以拥有多个数据源(数据池)

使用

在一个模块化的打包系统中，您必须显式地通过 Vue.use() 来安装 Vuex：

//在src内创建configs文件夹，configs内创建store.js文件，写入以下代码

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

创建、导出store

//在src/configs/store.js继续写入以下代码

// 实例化Vuex，创建一个仓库
const store = new Vuex.Store({
    // 状态
    // 该库存数据的地方
    state: {
        // 状态值
        count: 5,
        author: 'lemon'
    },
    // 修改数据的方法
    mutations: {
        // 修改数据的第一个方法
        increment(state，data) {
            state.count = data
        }
    }
})
// 暴露store仓库到`main.js`的根容器里面
export default store

挂载仓库

//在main.js文件内挂在仓库

// 引入仓库
import store from './configs/store.js'
// Root容器
let vm = new Vue({
  // 挂载仓库
  store,
  render: h => h(App),
}).$mount('#app')

获取数据源的数据

第一种方法

beforeCreate() {
    // 来自于vuex仓库的author
    console.log(this.$store.state.author)
    // 来自于组件自定义
    console.log(this.title)
}

第二种方法

先定义store中的getters

getters: {
    // 获取author的方法
    getAuthor(state) {
        return state.author + ' Yeah'
    },
    getCount(state) {
        return state.count
    }
}

通过属性访问
Getter 会暴露为store.getters对象，你可以以属性的形式访问这些值

computed: {
    // 从仓库里面去取值
    title(){
      return this.$store.getters.getAuthor
    }
}

修改数据的方法

先定义store中的mutations

// 修改数据的方法
mutations: {
    // 修改数据的第一个方法
    editCount(state) {
        state.count++
    },
    // 修改仓库中state中的author
    editAuthor(state, data) {
        state.author = data
    }
}

然后在组件触发commit事件

methods: {
    editAuthor() {
      console.log(this.$store);
      // 触发store里面的mutations，把store里面的author改为laotian
      this.$store.commit('editAuthor','laotian')
    }
}

配合action

先触发action—commit—>mutations—>更改state的数据—>触发getters—>获取数据

组件通信四大方案

• Vuex(同页面下==同路由下，任何形式下的组件都可以进行通信) 同路由下的组件之间的通信

• $emit和$on事件总线，观察者模式 任意阶层传
  https://cn.vuejs.org/v2/guide/components-custom-events.html

• props父子孙数据集成
  https://cn.vuejs.org/v2/guide/components-props.html

• 本地存储和cookie，把数据放到url上
  
  

vuex中的state在组件中如何监听？

• vuex中的state会在index.vue组建中使用，而这个状态的初始化是通过异步加载完成的。在data_bar渲染过程中，获取的state状态为空。也就是说组件在异步完成之前就已经完成渲染了，导致组件的数据没有来得及渲染。

例如：

//index.vue组件
created() {
	axios.get("http://39.105.178.245:3000/users/login", {
	   params: {
	       title: "lemon",
	   },
	}).then((data) => {
	    this.$store.commit("upd_author", data);
	}, (err) => {
	    console.log(err);
	})
}

//data_bar.vue组件
  <template>
     <div>{{name}}</div>
  </template>
  
  data() {
    return {
      name: []
    };
  },
  created(){
  	this.name = return this.$store.state.author
  }

解决方法：
在computed中写一个计算属性get_energy，返回状态管理中的author。然后在watch中监听这个计算属性的变化，对data_bar.vue中的name重新赋值。

//data_bar.vue组件

  <template>
     <div>{{name}}</div>
  </template>
  
  data() {
    return {
      name: "llt"
    };
  },
  computed: {
    get_energy() {
      return this.$store.state.author
    }
  },
  watch: {
    get_energy(val) {
      this.name = val;
    }
  }