同胞传值和vuex

同胞传值和vuex

文章目录

• • 同胞传值兄弟传值----中央事件总线
• vuex
• • • 属性1 state
    • 属性2 mutations
    • • • Mutations 提交载荷（Payload）
        • vuex修改数据刷新丢失
    • 属性三： actions
    • • • 3·1：主要作用：
        • 3·2：使用
    • 属性四：getters
    • • • 4·1：主要作用：
        • 4·2：使用：
    • 属性五：modules模块
    • • • 5·1：主要作用：
        • 5·2：使用：

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

中央事件总线：就是在组件与组件之间创建一个空的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)=>{=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.$storemit(“mutations的名字”)【调用修改的数据】

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

Mutations 提交载荷（Payload）

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

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

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

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

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

vuex修改数据刷新丢失

created () {//在页面加载时读取localStorage里的状态信息if (Item("data") ) {//replaceState替换数据 Object.assign合并对象this.$placeState(Object.assign({}, this.$store.state,JSON.Item("data"))))} //在页面刷新时将vuex里的信息保存到localStorage里window.addEventListener("beforeunload",()=>{localStorage.setItem("data",JSON.stringify(this.$store.state))})},

属性三： actions

3·1：主要作用：

在vuex中处理异步操作的

3·2：使用

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

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

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

  actions: {vuexget(context){console.log("我去发异步了")        		getlink(":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.datamentList)})}},
  

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

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

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

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

   actions: {vuexget(context){console.log("我去发异步了")
  getlink(":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.datamentList)contextmit("uparr",ok.data.datamentList)})}},
  

异步请求的具体流程

先写好拦截器以及promise封装

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

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

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

在mutations里编写修改的方法

在组件中调用state数据

属性四：getters

4·1：主要作用：

是vuex的计算属性

4·2：使用：

• 在vuex中定义

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

• 使用 this.$

  <h1>getters使用</h1>
  <p>{{this.$s.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){=payload},uparr(state,payload){state.arr=payload}},actions: {// 处理异步操作的  this.$storevuexget(context){console.log("我去发异步了")getlink(":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.datamentList)contextmit("uparr",ok.data.datamentList)})}},getters:{// 名字(state 就是state数据源){//   return 不能忘  // }uppertext(state){oUpperCase()}},
  }
  

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

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