同胞传值和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)=>{
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