手机国产精品一区二区,另类第一页,亚欧在线,日韩一国产极品99热在线播放69_国产美女久久精品香蕉欧美_亚州中文无码aⅤ在线_免费国产v片在线

淺談Vuex的使用

2021-3-26    前端達人

正如Redux一樣,當你不知道是否需要Vuex那就是不需要。不要因為想用Vuex而使用它。

用過Vue的人都知道,Vuex是Vue的一個全局狀態(tài)管理模塊,它的作用是多個組件共享狀態(tài)及數(shù)據(jù),當某個組件將全局狀態(tài)修改時,在綁定了該狀態(tài)的另一個組件也將響應。實際上可以將Vue理解為一個function,在Vue的作用域中有一個數(shù)據(jù)代理,在每個Vue的實例中都能對其讀和寫



我們都知道Vue的數(shù)據(jù)驅動原理是用Object.defineProperty()進行數(shù)據(jù)代理,在setter中對數(shù)據(jù)綁定的view進行異步響應(vue3.0則是使用proxy)

通過查看Vuex源碼可知Vuex的核心原理就是在Vue的beforeCreate鉤子前混入(mixin)Vuex,并在init中將$store屬性注冊到Vue中





為了使案例更具體,我這還是簡單使用腳手架搭了個項目(可參考另一篇文章),雖然只有兩個組件,但是能清晰的理解其用法,我的src目錄如下,除了最基礎的App.vue和main.js外只有兩個組件和一個store



先說明一下兩個組件的作用,第一個組件是輸入框,在里面輸入字符,在二個組件div中顯示,就是這么簡單

首先我們使用常規(guī)方式(EventBus)實現(xiàn)一下,這里只需要在mainjs中創(chuàng)建一個vue實例,然后注冊在vue中就可以通過事件emit和on來進行組件通信

main.js

import Vue
  from 'vue'
import App
  from './App'
Vue.prototype.$eventBus = new Vue()
 
new Vue({
  el: '#app',
  components: {App},
  template: '<App/>'
})
<template>
  <div>
    {{
      val
    }}
  </div>
</template>
 
<script>
export default {
  name: "divComp",
  data () {
    return {
      val: ''
    }
  },
  mounted () {
    this.$eventBus.$on('changeVal', (e) => {//監(jiān)聽輸入事件通過eventBus傳遞信息
      this.val = e
    })
  }
}
</script>
 
<style
  scoped>
 
</style>

如果到這一步,你仍然感覺難度不大,那么恭喜你,Vuex的使用已經掌握了一大半了

下面,我們來說說actions,在說actions之前,我們先回顧一下mutations,mutations中注冊了一些事件,在組件中通過emit對事件進行觸發(fā),達到處理異步且解耦的效果,然而官方并不推薦我們直接對store進行操作
官方對actions的說明是:Action 類似于 mutation,不同在于1.Action 提交的是 mutation,而不是直接變更狀態(tài)。2.Action 可以包含任意異步操作。

也就是說,我們要把組件中的emit操作放到actions中,而在組件中通過某些方式來觸發(fā)actions中的函數(shù)間接調用emit,此時,為了讓action更直觀,我們添加一個清除輸入框字符的方法,當點擊清除按鈕時清除state.val
在輸入框組件中將value綁定到state上

<template>
  <input type="text" @input="inputHandler" :value="this.$store.state.val" />
</template>
 
<script>
export default {
  name: "inputComp",
  methods: {
    inputHandler(e) {
      this.$store.dispatch("actionVal", e.target.value);
    },
  },
};
</script>
 
<style
  scoped>
</style>
在另一個顯示數(shù)據(jù)的組件中新增刪除按鈕并綁定刪除事件,通過dispatch告知store并通過emit操作state

<template>
  <div>
    <button @click="clickHandler">清除</button>
    <span>{{ this.$store.state.val + this.$store.getters.getValueLength }}</span>
  </div>
</template>
 
<script>
export default {
  name: "divComp",
  methods: {
    clickHandler(){
      this.$store.dispatch('actionClearVal')
    }
  },
};
</script>
 
<style
  scoped>
</style>
最后在store中新建刪除的actions和mutations

import Vue
from "vue";
import Vuex
from "vuex";
 
Vue.use(Vuex);
const state = {
  val: ''
}
 
const mutations = {
  changeVal(state, _val) {
    state.val = _val
  },
  clearVal(state, _val) {
    state.val = ''
  }
}
const actions = {
  actionVal(state, _val) {
    state.commit('changeVal', _val)
  },
  actionClearVal(state) {
    state.commit('clearVal')
  }
}
const getters = {
  getValueLength(state) {
    return `長度:${state.val.length}`
  }
}
export default new Vuex.Store({
  state,
  mutations,
  actions,
  getters
})
最終效果如下:


到這里為止,Vuex的基本用法就介紹完畢了。
然而除此之外,Vuex官方還提供了輔助函數(shù)(mapState,mapMutations,mapGetters,mapActions)和Modules(store的子模塊,當有許多全局狀態(tài)時,我們?yōu)榱吮苊獯a臃腫,就可以將各個store分割成模塊)方便我們書寫
下面我們用輔助函數(shù)重新實現(xiàn)一下上述功能
輸入框:

<template>
  <input type="text" @input="inputHandler" :value="value" />
</template>
 
<script>
import { mapState, mapMutations } from "vuex";
export default {
  name: "inputComp",
  computed: {
    ...mapState({ value: "val" }),
  },
  methods: {
    ...mapMutations({ sendParams: "changeVal" }), // sendParams用來傳遞參數(shù),先把sendParams注冊到mutations上,輸入時觸發(fā)sendParams
    inputHandler(e) {
      this.sendParams(e.target.value);
    },
  },
};
</script>
 
<style
  scoped>
</style>
顯示框:

<template>
  <div>
    <button @click="clickHandler">清除</button>
    <span>{{ value + valueLength }}</span>
  </div>
</template>
 
<script>
import { mapState, mapGetters, mapActions } from "vuex";
export default {
  name: "divComp",
  computed: {
    ...mapState({ value: "val" }),
    ...mapGetters({ valueLength: "getValueLength" }),
  },
  methods: {
    ...mapActions({ clickHandler: "actionClearVal" }),
  },
};
</script>
 
<style
  scoped>
</style>


藍藍設計www.88yangsc.com )是一家專注而深入的界面設計公司,為期望卓越的國內外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

分享本文至:

日歷

鏈接

個人資料

藍藍設計的小編 http://www.88yangsc.com

存檔