Vuex: 实现同级组件的简单通信
2018-04-04 19:07
761 查看
1. Vuex 是什么?
Vuex 是专门为Vue 组件化思想带来的组件间通信问题提供的解决方案,主要解决以下两个问题:
多个视图依赖于同一状态
来自不同视图的行为需要变更同一状态
2. 核心概念
State: 可以简单理解为Vue 维持的全局变量(状态)。
Getter: 获取State 中的状态的方法,可以在取出前对数据进行二次处理。
Mutation: 是改变State 中的状态的唯一方法,只能是同步操作。
Action: 改变State 中的状态的方法,Action 提交的是mutation,而不是直接改变状态,与Mutation 不同的是Action 可以包含任意异步操作。
Module: 将复杂应用中的状态分模块保存,这里不进行讨论。
3. 需求场景分析
3.1 组件树结构
Page (主页面)
|-- NavBar (顶部导航栏)
|-- LocationText (当前所在位置)
|-- SideBar (左侧菜单栏)
|-- UserListUnit (用户列表组件)
|-- modalEditStatus (更改用户状态弹框)
3.2 实现效果
在modalEditStatus 中成功编辑用户状态后,通知UserListUnit 组件重新发送ajax 请求刷新自身内容。
即实现modalEditStatue 组件与UserListUnit 组件的通信。
4. 如何实现
思路:在modalEditStatus 组件中更新用户状态成功以后,改变State 中控制刷新的变量的值(变为true)。UserListUnit 察觉到了这个值的变化,进行刷新,然后重置该变量的值(变为false)。
4.1 创建store.js 文件
在components 同级目录下创建store 文件夹,然后在store 文件夹下创建store.js 文件,文件内容如下:
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
// 在这里添加需要全局维护的状态
const state = {
// userListUnit是否需要刷新
userListUnitReload: false
}
// getters 可根据需要使用
const getters = {
}
// actions 跟 mutations 作用相同,不过是异步操作
const actions = {
}
// mutations 修改共享状态 同步操作
// 在这里添加更改全局状态的方法
const mutations = {
toggleUserListUnitReload (state) {
state.userListUnitReload = !state.userListUnitReload
}
}
export default new Vuex.Store({
state,
getters,
actions,
mutations
})4.2 在main.js 中引入store.js
import store from './store/store'4.3 在modalEditStatus 更新成功的代码之后添加更改Vuex 状态操作,通知UserListUnit 重新获取数据
this.toggleUserListUnitReload()但是modalEditStatus 此时是不认识toggleUserListUnitReload() 这个方法的,为了让它认识,我们还必须执行以下操作:
在modalEditStatus 组件中引入mapMutations
import { mapMutations } from 'vuex'
将toggleUserListUnitReload() 方法注册到modalEditStatus 组件的方法中
methods: {
// 添加mutations方法映射
...mapMutations(['toggleUserListUnitReload']),
OtherFunction (para) {
// other code
}
}4.4 在UserListUnit 组件中监听Vuex 中状态的值,在发生变化时重发ajax 请求刷新页面
在UserListUnit 组件中引入mapState 和mapMutations
import { mapState, mapMutations } from 'vuex'
在computed 中添加接收Vuex 中状态的变量
computed: {
// 这句话的意思是接收Vuex 中state 中的userListUnitReload 值并保存在本地的同名变量中
...mapState(['userListUnitReload']),
nowChosenStatus () {
// other code
}
}
在watch 中监听变量的值,在正确的时机进行刷新
watch: {
userListUnitReload: function (newV, oldV) {
// 检查是否需要刷新页面
if (newV) {
this.GetUserInfo()
// 重新将刷新设为false
this.toggleUserListUnitReload()
}
}
}
Vuex 是专门为Vue 组件化思想带来的组件间通信问题提供的解决方案,主要解决以下两个问题:
多个视图依赖于同一状态
来自不同视图的行为需要变更同一状态
2. 核心概念
State: 可以简单理解为Vue 维持的全局变量(状态)。
Getter: 获取State 中的状态的方法,可以在取出前对数据进行二次处理。
Mutation: 是改变State 中的状态的唯一方法,只能是同步操作。
Action: 改变State 中的状态的方法,Action 提交的是mutation,而不是直接改变状态,与Mutation 不同的是Action 可以包含任意异步操作。
Module: 将复杂应用中的状态分模块保存,这里不进行讨论。
3. 需求场景分析
3.1 组件树结构
Page (主页面)
|-- NavBar (顶部导航栏)
|-- LocationText (当前所在位置)
|-- SideBar (左侧菜单栏)
|-- UserListUnit (用户列表组件)
|-- modalEditStatus (更改用户状态弹框)
3.2 实现效果
在modalEditStatus 中成功编辑用户状态后,通知UserListUnit 组件重新发送ajax 请求刷新自身内容。
即实现modalEditStatue 组件与UserListUnit 组件的通信。
4. 如何实现
思路:在modalEditStatus 组件中更新用户状态成功以后,改变State 中控制刷新的变量的值(变为true)。UserListUnit 察觉到了这个值的变化,进行刷新,然后重置该变量的值(变为false)。
4.1 创建store.js 文件
在components 同级目录下创建store 文件夹,然后在store 文件夹下创建store.js 文件,文件内容如下:
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
// 在这里添加需要全局维护的状态
const state = {
// userListUnit是否需要刷新
userListUnitReload: false
}
// getters 可根据需要使用
const getters = {
}
// actions 跟 mutations 作用相同,不过是异步操作
const actions = {
}
// mutations 修改共享状态 同步操作
// 在这里添加更改全局状态的方法
const mutations = {
toggleUserListUnitReload (state) {
state.userListUnitReload = !state.userListUnitReload
}
}
export default new Vuex.Store({
state,
getters,
actions,
mutations
})4.2 在main.js 中引入store.js
import store from './store/store'4.3 在modalEditStatus 更新成功的代码之后添加更改Vuex 状态操作,通知UserListUnit 重新获取数据
this.toggleUserListUnitReload()但是modalEditStatus 此时是不认识toggleUserListUnitReload() 这个方法的,为了让它认识,我们还必须执行以下操作:
在modalEditStatus 组件中引入mapMutations
import { mapMutations } from 'vuex'
将toggleUserListUnitReload() 方法注册到modalEditStatus 组件的方法中
methods: {
// 添加mutations方法映射
...mapMutations(['toggleUserListUnitReload']),
OtherFunction (para) {
// other code
}
}4.4 在UserListUnit 组件中监听Vuex 中状态的值,在发生变化时重发ajax 请求刷新页面
在UserListUnit 组件中引入mapState 和mapMutations
import { mapState, mapMutations } from 'vuex'
在computed 中添加接收Vuex 中状态的变量
computed: {
// 这句话的意思是接收Vuex 中state 中的userListUnitReload 值并保存在本地的同名变量中
...mapState(['userListUnitReload']),
nowChosenStatus () {
// other code
}
}
在watch 中监听变量的值,在正确的时机进行刷新
watch: {
userListUnitReload: function (newV, oldV) {
// 检查是否需要刷新页面
if (newV) {
this.GetUserInfo()
// 重新将刷新设为false
this.toggleUserListUnitReload()
}
}
}
相关文章推荐
- vue子父组件通信的实现代码
- vue项目中v-model父子组件通信的实现详解
- vue实现简单表格组件实例详解
- VUE 简单父子组件,兄弟组件弹窗通信练习
- Vue2.0与 [百度地图] 结合使用———vue+webpack+axios+百度地图实现组件之间的通信
- 第十节:实现vue组件之间的通信
- Vue组件BootPage实现简单的分页功能
- vue如何实现父子组件通信,以及非父子组件通信(待看)
- vue 2 使用Bus.js进行兄弟(非父子)组件通信 简单案例
- 用vue写一个商城的上货组件(简单易懂版,50行js实现效果)
- vue 同级组件之间的通信
- vue实现简单表格组件
- 如何实现一个简单的Vue移动端组件库
- vue2.0父子组件间通信的实现方法
- Vue之父子、同级组件的通信详解
- vue实现简单表格组件
- 使用Vue组件实现一个简单弹窗效果
- VUE简单组件通信
- Vue.js入门学习--父子组件的说明和简单通信(十)
- Vue父子组建的简单通信之控制开关Switch的实现