效果图如下:
1. 准备好环境
使用 vue/cil 初始化项目配置:
npm install -g @vue/cli //全局安装@vue/cli vue create demo-vue //创建项目
yarn add vuex安装vuex创建一个store文件夹并使用:
2. 实现目的
stroe/index.js内容如下:(我们的目的将引入自写的vuex实现vuex基础功能)
import Vue from 'vue' import Vuex from 'vuex' // import Vuex from './myvuex' //我们实现的 青铜版vuex // import Vuex from './myvuexplus' //我们实现的 白银版vuex Vue.use(Vuex) //执行install方法 将new Vuex.Store挂载到this.$store export default new Vuex.Store({ state: { counter: 0, userData: { name: '时间', age: 18 } }, getters: { name(state) { return state.userData.name } }, mutations: { add(state) { state.counter++ }, updateName(state, payload) { state.userData.name = payload } }, actions: { add({ commit }) { setTimeout(() => { commit('add') }, 1000); } } })
- 青铜版vuexmyvuex.js代码如下:
let Vue class Store { constructor(options) { this._vm = new Vue({ data: { state: options.state } }) let getters = options.getters this.getters = {} Object.keys(getters).forEach((val) => { Object.defineProperty(this.getters, val, { //getters响应式 get: () => { return getters[val](this.state) } }) }) this._actions = Object.assign({}, options.actions) this._mutations = Object.assign({}, options.mutations) } // get/set state目的:防止外部直接修改state get state() { return this._vm.state } set state(value) { console.error('please use replaceState to reset state') } commit = (funName, params) => { //this执行问题 // 在mutations中找到funName中对应的函数并且执行 this._mutations[funName](this.state, params) } dispatch(funName, params) { this._actions[funName](this, params) } } function install(vue) { Vue = vue vue.mixin({ beforeCreate () { // 将 new Store() 实例挂载到唯一的根组件 this 上 if (this.$options"text-align: center">![]()
- 白银版vuexmyvuexplus.js代码如下:
let _Vue const install = function(Vue, opts) { _Vue = Vue _Vue.mixin({ // 因为我们每个组件都有 this.$store这个东西,所以我们使用混入模式 beforeCreate () { // 从根组件向子组件遍历赋值,这边的 this 就是每个 Vue 实例 if (this.$options && this.$options.store) { // 这是根节点 this.$store = this.$options.store } else { this.$store = this.$parent && this.$parent.$store } } }) } class ModuleCollection { constructor(opts) { this.root = this.register(opts) } register(module) { let newModule = { _raw: module, _state: module.state || {}, _children: {} } Object.keys(module.modules || {}).forEach(moduleName => { newModule._children[moduleName] = this.register(module.modules[moduleName]) }) return newModule } } class Store { constructor(opts) { this.vm = new _Vue({ data () { return { state: opts.state // 把对象变成响应式的,这样才能更新视图 } } }) this.getters = {} this.mutations = {} this.actions = {} // 先格式化传进来的 modules 数据 // 嵌套模块的 mutation 和 getters 都需要放到 this 中 this.modules = new ModuleCollection(opts) console.log(this.modules) Store.installModules(this, [], this.modules.root) } commit = (mutationName, value) => { // 这个地方 this 指向会有问题,这其实是挂载在实例上 this.mutations[mutationName].forEach(f => f(value)) } dispatch(actionName, value) { this.actions[actionName].forEach(f => f(value)) } get state() { return this.vm.state } } Store.installModules = function(store, path, curModule) { let getters = curModule._raw.getters || {} let mutations = curModule._raw.mutations || {} let actions = curModule._raw.actions || {} let state = curModule._state || {} // 把子模块的状态挂载到父模块上,其他直接挂载到根 store 上即可 if (path.length) { let parent = path.slice(0, -1).reduce((pre, cur) => { return pre[cur] }, store.state) _Vue.set(parent, path[path.length - 1], state) } Object.keys(getters).forEach(getterName => { Object.defineProperty(store.getters, getterName, { get: () => { return getters[getterName](state) } }) }) Object.keys(mutations).forEach(mutationName => { if (!(store.mutations && store.mutations[mutationName])) store.mutations[mutationName] = [] store.mutations[mutationName].push(value => { mutations[mutationName].call(store, state, value) }) }) Object.keys(actions).forEach(actionName => { if (!(store.actions && store.actions[actionName])) store.actions[actionName] = [] store.actions[actionName].push(value => { actions[actionName].call(store, store, value) }) }) Object.keys(curModule._children || {}).forEach(module => { Store.installModules(store, path.concat(module), curModule._children[module]) }) } // computed: mapState(['name']) // 相当于 name(){ return this.$store.state.name } const mapState = list => { // 因为最后要在 computed 中调用 let obj = {} list.forEach(stateName => { obj[stateName] = () => this.$store.state[stateName] }) return obj } const mapGetters = list => { // 因为最后要在 computed 中调用 let obj = {} list.forEach(getterName => { obj[getterName] = () => this.$store.getters[getterName] }) return obj } const mapMutations = list => { let obj = {} list.forEach(mutationName => { obj[mutationName] = (value) => { this.$store.commit(mutationName, value) } }) return obj } const mapActions = list => { let obj = {} list.forEach(actionName => { obj[actionName] = (value) => { this.$store.dispatch(actionName, value) } }) return obj } export default { install, Store, mapState, mapGetters, mapMutations, mapActions }
白银版vuex this.$stroe:
3. App.vue 内使用自写的vuex:
<template> <div id="app"> <button @click="$store.commit('add')">$store.commit('add'): {{$store.state.counter}}</button> <br> <button @click="$store.commit('updateName', new Date().toLocaleString())">$store.commit('updateName', Date): {{$store.getters.name}}</button> <br> <button @click="$store.dispatch('add')">async $store.dispatch('add'): {{$store.state.counter}}</button> </div> </template> <script> ...
以上就是实现vuex原理的示例的详细内容,更多关于实现vuex原理的资料请关注其它相关文章!
vuex,原理,实现,vuex
《魔兽世界》大逃杀!60人新游玩模式《强袭风暴》3月21日上线
暴雪近日发布了《魔兽世界》10.2.6 更新内容,新游玩模式《强袭风暴》即将于3月21 日在亚服上线,届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。
艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕,并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时,他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中,玩家将会进入一个全新的海盗主题大逃杀式限时活动,其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场,作为一个独立于主游戏之外的活动,玩家可以用大逃杀的风格来体验《魔兽世界》,不分职业、不分装备(除了你在赛局中捡到的),光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式,玩家在加入海盗主题的预赛大厅区域前,可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹,《巨龙崛起》和《魔兽世界:巫妖王之怒 经典版》的玩家都可以获得奖励。
更新动态
- 《庄心妍 实力唱将 发烧音乐精选集》[WAV+CUE][380MB]
- [音展纪念碟]2006年《TAA台湾第十六届国际HI-ENDHI-FI音响展》2cd[WAV]
- 中国音乐地图之听见西藏山歌牧歌酒歌2020[WAV分轨]
- 王宏伟2017-永远的红飘带[太平洋影音][WAV+CUE]
- 费翔.1997-NOW现在【第一中国】【WAV+CUE】
- 新格合唱团.1981-我唱你和2辑(滚石新格民歌系列)【新格】【WAV+CUE】
- 陈柏宇.2011-QUINQUENNIUM【SONY】【WAV+CUE】
- 雨果唱片-《金唛系列-蔷薇依韵琼瑶》WAV
- 陈百强《凝望(2012华纳LPCD45限量版)[DMI]》[WAV整轨]
- 模拟之声慢刻CD《徐小凤45周年》[德国母带][低速原抓WAV+CUE]
- 《庄心妍 实力唱将 发烧音乐精选集》[WAV+CUE][380MB]
- 《王菲 单曲合集》[FlAC/分轨][520MB]
- 《费玉清 原味再现 水长流》[WAV+CUE][430MB]
- 群星.1992-畅销榜老歌金曲10CD【风格】【WAV+CUE】
- 孙悦.2024-时光音乐会【金蜂】【WAV+CUE】