欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

實現(xiàn)vuex原理的示例

 更新時間:2020年10月21日 09:46:35   作者:舜岳  
這篇文章主要介紹了實現(xiàn)vuex原理的示例,幫助大家更好的理解和學(xué)習(xí)vue,感興趣的朋友可以了解下

效果圖如下:

1. 準(zhǔn)備好環(huán)境

使用 vue/cil 初始化項目配置:

npm install -g @vue/cli //全局安裝@vue/cli vue create demo-vue //創(chuàng)建項目

yarn add vuex安裝vuex創(chuàng)建一個store文件夾并使用:

2. 實現(xiàn)目的

stroe/index.js內(nèi)容如下:(我們的目的將引入自寫的vuex實現(xiàn)vuex基礎(chǔ)功能)

import Vue from 'vue'
import Vuex from 'vuex' 
// import Vuex from './myvuex'   //我們實現(xiàn)的 青銅版vuex
// import Vuex from './myvuexplus' //我們實現(xiàn)的 白銀版vuex

Vue.use(Vuex) //執(zhí)行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響應(yīng)式
    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執(zhí)行問題
  // 在mutations中找到funName中對應(yīng)的函數(shù)并且執(zhí)行
  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?.store) {
    this.$store = this.$options.store
   } else {
    this.$store = this.$parent && this.$parent.$store
   }
  }
 })
}

export default {
 Store,
 install
}

青銅版vuex this.$stroe:

  • 白銀版vuexmyvuexplus.js代碼如下:
let _Vue
const install = function(Vue, opts) {
 _Vue = Vue
 _Vue.mixin({ // 因為我們每個組件都有 this.$store這個東西,所以我們使用混入模式
  beforeCreate () { // 從根組件向子組件遍歷賦值,這邊的 this 就是每個 Vue 實例
   if (this.$options && this.$options.store) { // 這是根節(jié)點
    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 // 把對象變成響應(yīng)式的,這樣才能更新視圖
    }
   }
  })

  this.getters = {}
  this.mutations = {}
  this.actions = {}

  // 先格式化傳進來的 modules 數(shù)據(jù)
  // 嵌套模塊的 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 || {}

 // 把子模塊的狀態(tài)掛載到父模塊上,其他直接掛載到根 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'])
// 相當(dāng)于 name(){ return this.$store.state.name }
const mapState = list => { // 因為最后要在 computed 中調(diào)用
 let obj = {}
 list.forEach(stateName => {
  obj[stateName] = () => this.$store.state[stateName]
 })
 return obj
}

const mapGetters = list => { // 因為最后要在 computed 中調(diào)用
 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 內(nèi)使用自寫的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>
...

以上就是實現(xiàn)vuex原理的示例的詳細內(nèi)容,更多關(guān)于實現(xiàn)vuex原理的資料請關(guān)注腳本之家其它相關(guān)文章!

相關(guān)文章

  • 淺析vue中常見循環(huán)遍歷指令的使用 v-for

    淺析vue中常見循環(huán)遍歷指令的使用 v-for

    這篇文章主要介紹了vue中常見循環(huán)遍歷指令的使用 v-for,包括v-for遍歷數(shù)組,v-for遍歷json對象,本文給大家介紹的非常詳細,需要的朋友可以參考下
    2018-04-04
  • Vue中使用addEventListener添加事件、removeEventListener移除事件的示例詳解

    Vue中使用addEventListener添加事件、removeEventListener移除事件的示例詳解

    最近在項目中需要用到addEventListener監(jiān)聽滾動條滾動的高度,所以就研究了一下在vue中是怎么進行事件監(jiān)聽的,添加事件和移除事件結(jié)合示例代碼給大家介紹的非常詳細,需要的朋友參考下吧
    2022-12-12
  • vuejs2.0實現(xiàn)分頁組件使用$emit進行事件監(jiān)聽數(shù)據(jù)傳遞的方法

    vuejs2.0實現(xiàn)分頁組件使用$emit進行事件監(jiān)聽數(shù)據(jù)傳遞的方法

    這篇文章主要介紹了vuejs2.0實現(xiàn)分頁組件使用$emit進行事件監(jiān)聽數(shù)據(jù)傳遞的方法,非常不錯,具有參考借鑒價值,,需要的朋友可以參考下
    2017-02-02
  • vue實現(xiàn)計數(shù)器簡單制作

    vue實現(xiàn)計數(shù)器簡單制作

    這篇文章主要為大家詳細介紹了vue實現(xiàn)計數(shù)器簡單制作,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2021-06-06
  • vue使用csp的簡單示例

    vue使用csp的簡單示例

    Vue是一套用于構(gòu)建用戶界面的漸進式框架,與其它大型框架不同的是,Vue被設(shè)計為可以自底向上逐層應(yīng)用,下面這篇文章主要給大家介紹了關(guān)于vue使用csp的相關(guān)資料,需要的朋友可以參考下
    2022-08-08
  • Vue CLI4.0 webpack配置屬性之productionSourceMap用法

    Vue CLI4.0 webpack配置屬性之productionSourceMap用法

    這篇文章主要介紹了Vue CLI4.0 webpack配置屬性之productionSourceMap用法,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2024-06-06
  • Vue中的同步和異步調(diào)用順序詳解

    Vue中的同步和異步調(diào)用順序詳解

    這篇文章主要介紹了Vue中的同步和異步調(diào)用順序,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-01-01
  • Vue實現(xiàn)JSON字符串格式化編輯器組件功能

    Vue實現(xiàn)JSON字符串格式化編輯器組件功能

    這篇文章主要介紹了Vue實現(xiàn)JSON字符串格式化編輯器組件,本文通過實例代碼給大家介紹的非常詳細,對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧
    2024-01-01
  • vue.js中過濾器的使用教程

    vue.js中過濾器的使用教程

    過濾器是一個通過輸入數(shù)據(jù),能夠及時對數(shù)據(jù)進行處理并返回一個數(shù)據(jù)結(jié)果的簡單函數(shù)。下面這篇文章主要給大家介紹了關(guān)于vue.js中過濾器使用的相關(guān)資料,需要的朋友可以參考借鑒,下面來看看詳細的介紹。
    2017-06-06
  • vue 項目打包時樣式及背景圖片路徑找不到的解決方式

    vue 項目打包時樣式及背景圖片路徑找不到的解決方式

    今天小編就為大家分享一篇vue 項目打包時樣式及背景圖片路徑找不到的解決方式,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2019-11-11

最新評論