介绍
采用集中式存储管理应用的所有组件的状态, 就能实现组件间数据共享
实现
逻辑图
从图上有两条线: Vue.use(vuec), 与 new Vuec.center(options)
第一条线Vue.use(vuec)安装插件
使用Vue.use(vuec)时, 会执行vuec的install方法,会注入参数Vue 所以vuec是这样的,
// index.js
import {Center, install} from './center'
export default {Center, install}
Center对象将实例化成center(下面再说),我们先看看install方法
// center.js
let Vue // 全局变量, 保存install里的Vue
export function install (_Vue) {
if (!Vue) {
_Vue.mixin({
beforeCreate: applyMixin // 在beforeCreate钩子上混入applyMixin函数
})
}
Vue = _Vue
}
install在Vue原型的beforeCreate混入applyMixin函数, 也就是说在生成每个Vue组件时,在它的生命周期beforeCreate钩子上就会执行applyMixin方法
第二条线 new Vuec.center(options)实例化Center对象
先看看用户传入的options, 下面例子
export default new Vuec.Center({
state: {
name: 'liuyang'
},
mutations: {
changeName (state) {
state.name = 'jike'
}
}
})
上面代码会生成center实例, 该实例上应该包括:state状态,commit方法提交变更等
// center.js
export class Center {
constructor (options= {}) {
let center = this
this.mutations = options.mutations
observeState(center, options.state)
}
get state () { // 代理了this.$center.state的最终访问值
return this._vm.$data.$$state
}
commit (_type, _payload) {
this.mutations[_type](this.state, _payload)
}
}
function observeState(center, state) { // 响应式state
center._vm = new Vue({
data: {
$$state: state
}
})
}
在执行new Vuec.Center({..})时,就是执行Center的构造函数
首先执行let center = this, 定义center保存当前实例
接着执行this.mutations = options.mutations, 在实例center上添加mutations属性, 值就是用户输入mutations,
按上面例子, this.mutations长成这样
this.mutations = {
changeName (state) {
state.name = 'jike'
}
}
最后执行observeState(center, options.state), 作用:让center实例的state属性指向options.state并且是响应式的
function observeState(center, state) { // 响应式state
center._vm = new Vue({ // 利用Vue的响应系统,将state转化成响应式
data: {
$$state: state
}
})
}
在center实例上添加_vm属性, 值是一个Vue实例, 在该Vue实例的data下定义了$$state, 它的值是options.state用户输入的state; 结合上面的这段代码
// center.js
export class Center {
...省略
get state () { // 代理了this.$center.state的最终访问值
return this._vm.$data.$$state
}
...省略
}
所以我们在组件中访问center.state其实就是访问center._vm.$data.$$state
OK, center就构建好了
创建Vue组件
用户输入
import Vue from 'vue'
import App from './App'
import router from './router'
import center from './center'
new Vue({
el: '#app',
router,
center, // 构建好的center实例
template: '<App/>',
components: {App}
})
在beforeCreate生命周期时会触发上面混入的applyMixin函数
// mixins.js
export default function applyMixin() {
vuecInit.call(this) //
}
function vuecInit () {
const options = this.$options
// vue的实例化是从外往内, 所以父组件的$center一定是options的center
this.$center = options.parent"htmlcode">
// center.js
export class Center {
... 省略
commit (_type, _payload) {
this.mutations[_type](this.state, _payload)
}
}
通常我们变更时: this.$center.commit('changeName', 'jike'), 这样的话, this.mutations[_type]就是对应方法函数, 往该函数里传入state以及payload,
举上面的例子
// this.mutations[_type] , _type = 'changeName', payload= 'jike'
this.mutations = {
changeName (state, payload) {
state.name = payload
}
}
说明
上面只是一个简单的状态管理, 还有很多地方没有实现: actions异步变更,getters函数,modules模块分割, 辅助函数mapState..等
源码地址: github
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
vue,状态管理
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线
暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。
艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。