亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

Vuex中五個屬性以及使用方法詳解

 更新時間:2023年09月11日 08:36:00   作者:擺爛的胡蘿卜  
這篇文章主要給大家介紹了關(guān)于Vuex中五個屬性以及使用的相關(guān)資料,Vuex是一個專為Vue.js應(yīng)用程序開發(fā)的狀態(tài)管理模式,文中通過代碼示例介紹的非常詳細,需要的朋友可以參考下

Vuex介紹

vuex是專門為Vue.js應(yīng)用程序開發(fā)的狀態(tài)管理模式。它采用集中式存儲,管理應(yīng)用的所有組件的狀態(tài),并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測的方式發(fā)生變化。

  • state 數(shù)據(jù)存貯

  • getter state的計算屬性

  • mutation 更改state中狀態(tài)的邏輯 同步操作

  • action 提交mutation 異步操作

  • model 模塊化

state基本數(shù)據(jù),存儲變量

使用方法:

可以通過this.$store.state 獲得Vuex的state,如下:

//    src/store/index
const store = new Vuex.Store({
    state: {
        number:66
    }
})
const app = new Vue({
    //..
    store,
    computed: {
        count: function(){
            return this.$store.state.number
        }
    },
    // this.$store.state.number
})
// 每當 store.state.number 發(fā)生變化, 都會重新求取計算屬性,并且觸發(fā)更新相關(guān)聯(lián)的 DOM。

mapState輔助函數(shù)

// 在需要使用的文件里
import { mapState } from 'vuex'
export default {
  // ...
  methods:{
 ...mapState({ myNumber: 'number' }),
} 
}    

mutations

提交mutation是更改Vuex中的store中的狀態(tài)的唯一方法。

mutation必須是同步的,如果要異步需要使用action。

每個 mutation 都有一個字符串的 事件類型 (type) 和 一個 回調(diào)函數(shù) (handler)。這個回調(diào)函數(shù)就是我們實際進行狀態(tài)更改的地方,并且它會接受 state 作為第一個參數(shù),提交載荷作為第二個參數(shù)。(提交荷載在大多數(shù)情況下應(yīng)該是一個對象),提交荷載也可以省略的。

const store = new Vuex.Store({
  state: {
    number: 1
  },
  mutations: {
    //無提交載荷
    Submit(state) {
        state.number++
    }
    //提交載荷
    SubmitN(state, payload) {
      state.number += payload.num
    }
  }
})

使用方法;

你不能直接調(diào)用一個 mutation handler。這個選項更像是事件注冊:“當觸發(fā)一個類型為 Submit 的 mutation 時,調(diào)用此函數(shù)。”要喚醒一個 mutation handler,你需要以相應(yīng)的 type 調(diào)用 store.commit 方法:

//無提交載荷
this.$store.commit('Submit')
//提交載荷
this.$store.commit('SubmitN', {
    num: 66
    })

mapMutations 輔助函數(shù)

與其他輔助函數(shù)類似,你可以在組件中使用 this.$store.commit(‘xxx’) 提交 mutation,或者使用 mapMutations 輔助函數(shù)將組件中的 methods 映射為 store.commit 調(diào)用。

// 在需要使用的文件里
import { mapMutations } from 'vuex'
export default {
? ? methods:{
    ...mapMutations({ mySubmit: 'Submit', mySubmitN: 'SubmitN'}),
}

actions

Action 類似于 mutation,不同在于:

  • Action 提交的是 mutation,而不是直接變更狀態(tài)。

  • Action 可以包含任意異步操作。

const store = new Vuex.Store({
  state: {
    number: 0
  },
  mutations: {
    submit (state) {
      state.number++
    }
  },
  actions: {
    submit (context) {
      setInterval(function(){
        context.commit('submit')
      }, 1000)
    }
  }
})

注意:Action 函數(shù)接受一個與 store 實例具有相同方法和屬性的 context 對象,因此你可以調(diào)用 context.commit 提交一個 mutation,或者通過 context.state 和 context.getters 來獲取 state 和 getters。

使用方法:

分發(fā)actions,即Action 通過 store.dispatch 方法觸發(fā):

this.$store.dispatch('increment')

mapActions輔助函數(shù)

你在組件中使用 this.$store.dispatch('xxx') 分發(fā) action,或者使用 mapActions 輔助函數(shù)將組件的 methods 映射為 store.dispatch 調(diào)用

import { mapActions } from 'vuex'
export default {
  //..
  methods: {
    ...mapActions([
      'submit' 
    ]),
    ...mapActions({
      add: 'submit' 
    })
  }
}

Modules

使用單一狀態(tài)樹,導(dǎo)致應(yīng)用的所有狀態(tài)集中到一個很大的對象。但是,當應(yīng)用變得很大時,store 對象會變得臃腫不堪。

為了解決以上問題,Vuex 允許我們將 store 分割到模塊(module)。每個模塊擁有自己的 state、mutation、action、getters、甚至是嵌套子模塊——從上至下進行類似的分割:

import Vue from 'vue'
import Vuex from 'vuex'
import getters from './getters'
import app from './modules/app'
import settings from './modules/settings'
import user from './modules/user'
Vue.use(Vuex)
const store = new Vuex.Store({
  modules: {
    app,
    settings,
    user
  },
  getters
})
export default store

使用模塊化的state,mutations,action,需在使用方法前加模塊名

如:

this.$store.state.user.number

this.$store.commit(‘user/xxx’)

this.$store.dispatch(‘user/xxx’)

getters

import Vue from 'vue'
import Vuex from 'vuex'
import getters from './getters'
Vue.use(Vuex)
const store = new Vuex.Store({
  getters
})
export default store
const getters = {
  sidebar: state => state.app.sidebar,
  device: state => state.app.device,
  token: state => state.user.token,
  username: state => state.user.username,
  empno: state => state.user.empno
}
export default getters

使用:this.$store.grtters.sidber , this.$store.grtters.device ,以此類推

mapGetters

import { mapGetters } from 'vuex'
// mapGetters的作用:把getters映射為計算屬性
computed: {
    ...mapGetters(['getPartList']),
    // ...mapGetters({
    //   calcList: 'getPartList'
    // }),
    // calcList () {
    //   // 注意:獲取getters的值,不需要加括號(當屬性使用)
    //   return this.$store.getters.getPartList
    // },
}

總結(jié)

到此這篇關(guān)于Vuex中五個屬性以及使用方法詳解的文章就介紹到這了,更多相關(guān)Vuex五大屬性及使用內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

最新評論