代码拉取完成,页面将自动刷新
同步操作将从 陌溪/LearningNotes 强制同步,此操作会覆盖自 Fork 仓库以来所做的任何修改,且无法恢复!!!
确定后同步将在后台操作,完成时将刷新页面,请耐心等待。
今天在写前端页面的时候,遇到这样一个问题,就是当一个页面由两个Vue文件构成的时候,如果在一个vue文件的时候进行了操作,那么需要将操作得到的数据传递给另外一个文件,那么另外页面就需要能够监听到前面这个页面的数据变化
这里以蘑菇博客举例,我们都知道蘑菇博客的头部是单独写在一个组件中,而下面的index的页面,又是另外一个vue文件,那么我在页面1点击搜索,页面2如何知道搜索的值呢?
其实解决的方案就是通过vuex来进行实现,步骤如下:
关于vuex的使用,可以参考:Vuex学习指南-实现一个计数器
首先我们需要定义一个message状态,用于存储我们需要发送的内容
import {SET_MESSAGE} from './mutation-types'
const app = {
// 全局状态
state: {
// 消息,用于更新
message: {}
},
// getters是对数据的包装,例如对数据进行拼接,或者过滤
getters: {
// 类似于计算属性
// 增加的方法
},
// 如果我们需要更改store中的状态,一定要通过mutations来进行操作
mutations: {
[SET_MESSAGE] (state, message) {
state.message = message
}
},
// actions是我们定义的一些操作,正常情况下,我们很少会直接调用mutation方法来改变state
actions: {
}
}
export default app
然后在页面1的时候引入
// vuex中有mapState方法,相当于我们能够使用它的getset方法
import {mapMutations} from 'vuex'
然后在method方法中,解析出刚刚我们定义的setMessage
methods:{
// 拿到vuex中的写的方法
...mapMutations(['setMessage']),
}
最后在我们点击的时候,调用setMessage方法
// 存储到vuex中
this.setMessage(message)
这样,我们的消息就放到了vuex中了,下面我们在页面2,添加watch的钩子函数,用于监听vuex中message状态的变化,如果改变了就会触发,那么我们就可以在这里编写业务逻辑代码了
watch: {
'$store.state.app.message': function (newFlag, oldFlag) {
console.log('监听到页面1的变化')
// 进行业务逻辑处理
}
}
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。