同胞传值和vuex

同胞传值兄弟传值----中央事件总线

中央事件总线：就是在组件与组件之间创建一个空的vue实例 用这个实例作为两个组件之间传递的桥梁

1.创建文件夹与文件 用过来编写这个空的vue实例

​ eventBus文件夹，里的index.js

import Vue from "vue"
export default new Vue

2.使用中央事件总线实例.$emit()来抛出数据

<template> 
  <div>
     <button @click="fun()">点我兄弟组件传值</button>
  </div>
</template>

<script>
import eventBus from "@/assets/eventBus.js"
export default {
     
     methods:{
     
         fun(){
     
             eventBus.$emit("pao","我是数据")
         }
     }
}
</script>

3.使用$on()来监听实例上的自定义事件

<template> 
  <div>
    bbbb{
     {
     text}}
  </div>
</template>
<script>
import eventBus from "@/assets/eventBus.js"
export default {
     
    data(){
     
        return{
     
            text:"默认值"
        }
    },
    create:{
     
        this.fun()
    }
     methods:{
     
         fun(){
     
            eventBus.$on("pao",(msg)=>{
     
                 this.text=msg;
             }) 
         }
             
     }
}
</script>

vuex

Vuex 是一个专为 Vue.js 应用程序开发中管理的一个模式。
通过创建一个集中的数据存储，方便程序中的所有组件进行访问

属性1 state

数据源=======组件中的data 使用来存储数据的 【存储数据】

属性2 mutations

是创建state修改的 而且要修改state必须要通过mutations来修改【修改数据】

 mutations: {
     
    // 是一个一个的修改方法
    // 修改方法(state数据源){}
    numadd(state){
     
      state.num=state.num+1
    },
    numdel(state){
     
      state.num=state.num-1
    },
  },

需要在页面中调用这些修改方法 this.$store.commit(“mutations的名字”)【调用修改的数据】

  methods:{
        add(){
            this.$store.commit("numadd")
        },
        del(){
            this.$store.commit("numdel")
        },
    }

Mutations 提交载荷（Payload）

payload载荷 就是在调用mutations的时候传递的数据接收形参

1.在调用commit()方法的时候 第一个参数是调用mutations的名字 第二参数是传递的数据注意：如果要传递多个那么久传递一个对象

 fun(){
            this.$store.commit("huangup",this.huanghuangage)
        },

2.在mutations接收的时候第二个形参就是接收传递数据的

 huangup(state,payload){
      state.age=payload
    }

vuex修改数据刷新丢失

created () {
     

   //在页面加载时读取localStorage里的状态信息

   if (localStorage.getItem("data") ) {
     

     //replaceState替换数据 Object.assign合并对象

     this.$store.replaceState(Object.assign({
     }, this.$store.state,JSON.parse(localStorage.getItem("data"))))
    } 

   //在页面刷新时将vuex里的信息保存到localStorage里

    window.addEventListener("beforeunload",()=>{
     

      localStorage.setItem("data",JSON.stringify(this.$store.state))
    })

   },

属性三： actions

3·1：主要作用：

在vuex中处理异步操作的

3·2：使用

• 创建actions 并且创建异步动作

  actions: {
         
      //参数context就相当于this.$store
        vuexget(context){
         
          console.log("我去发异步了")
        }
    },
  

• 在创建的actions中填入异步操作

  actions: {
         
        vuexget(context){
         
          console.log("我去发异步了")        		getlink("http://api.artgoer.cn:8084/artgoer/api/v1/user/324380/v3/topic/topicHomeByLabel?pageIndex=1&token=b544cd63-6d42-46fe-a96c-3cf96bae3113&topicId=62187").then((ok)=>{
         
            console.log(ok.data.data.commentList)
           
          })
        }
    },
  

• 在组件中通过dispatch来进行页面的调用

  dispatch(“触发的actions的名字”)

   funb(){
         
   // 要触发actions的异步操作就要用到 dispatch("你要触发actions的名字")
    this.$store.dispatch("vuexget")
  }
  

• 将请求来的数据交给mutations来修改state

   actions: {
         
        vuexget(context){
         
          console.log("我去发异步了")
  getlink("http://api.artgoer.cn:8084/artgoer/api/v1/user/324380/v3/topic/topicHomeByLabel?pageIndex=1&token=b544cd63-6d42-46fe-a96c-3cf96bae3113&topicId=62187").then((ok)=>{
         
            console.log(ok.data.data.commentList)
            context.commit("uparr",ok.data.data.commentList)
          })
        }
    },
  

异步请求的具体流程

先写好拦截器以及promise封装

在组件中使用this.$store.dispatch(“actions名字”)来调用异步操作

在actions来调用数据请求来请求数据【actions里面是一个一个的方法】

接下来修改state已达到任何组件都可以使用请求来的数据【acutions的形参.commit(“修改名”，“请求来的数据”)】

在mutations里编写修改的方法

在组件中调用state数据

属性四：getters

4·1：主要作用：

是vuex的计算属性

4·2：使用：

• 在vuex中定义

   getters:{
         
      // 名字(state 就是state数据源){
         
      //   return 不能忘  
      // }
      uppertext(state){
         
        return state.text.toUpperCase()
      }
    },
  

• 使用 this.$store.getters.xxxxx

  <h1>getters使用</h1>
  <p>{
         {
         this.$store.getters.uppertext}}</p>
  

属性五：modules模块

5·1：主要作用：

把原来写在vuex文件中的内容拆分成细小的功能点

5·2：使用：

• 新建文件夹与文件[store是文件名]

• 把你要拆分的state mutations actions getters 写进模块文件

  import {
         getlink} from "@/api/getapi.js"
  export let aboutm={
         
      state: {
         
          text:"xixi",
          arr:[],
        },
        mutations: {
         
          uptext(state,payload){
         
            state.text=payload
          },
          uparr(state,payload){
         
            state.arr=payload
          }
        },
        actions: {
         
          // 处理异步操作的  this.$store
            vuexget(context){
         
              console.log("我去发异步了")
              getlink("http://api.artgoer.cn:8084/artgoer/api/v1/user/324380/v3/topic/topicHomeByLabel?pageIndex=1&token=b544cd63-6d42-46fe-a96c-3cf96bae3113&topicId=62187").then((ok)=>{
         
                console.log(ok.data.data.commentList)
                context.commit("uparr",ok.data.data.commentList)
              })
            }
        },
        getters:{
         
          // 名字(state 就是state数据源){
         
          //   return 不能忘  
          // }
          uppertext(state){
         
            return state.text.toUpperCase()
          }
        },
  }
  

• 在调用commit修改 dispatch异步 gettersvuex的计算属性 等这几项的时候没有变化

• 只有在调用state的时候语法变了 this.$store.state.模块名.xxxxx