這篇文章主要介紹“vue狀態(tài)管理實(shí)例分析”的相關(guān)知識，小編通過實(shí)際案例向大家展示操作過程，操作方法簡單快捷，實(shí)用性強(qiáng)，希望這篇“vue狀態(tài)管理實(shí)例分析”文章能幫助大家解決問題。

創(chuàng)新互聯(lián)成立與2013年，是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司，擁有項(xiàng)目網(wǎng)站建設(shè)、成都網(wǎng)站制作網(wǎng)站策劃，項(xiàng)目實(shí)施與項(xiàng)目整合能力。我們以讓每一個(gè)夢想脫穎而出為使命，1280元文成做網(wǎng)站,已為上家服務(wù),為文成各地企業(yè)和個(gè)人服務(wù),聯(lián)系電話:13518219792

場景：一個(gè)地圖應(yīng)用，有個(gè)側(cè)邊欄，側(cè)邊欄里面放著很多選項(xiàng)，選項(xiàng)改變的時(shí)候，應(yīng)用會(huì)根據(jù)側(cè)邊欄的條件請求數(shù)據(jù)，然后在地圖上放 markers 。頁面可以簡單抽象成如下結(jié)構(gòu)：

// App.vue

有很多種方式可以來完成上面的需求，我先介紹 2 種常見的做法，最后再給出一個(gè)比較另類但很有趣的方案。

1.直接上 vuex

通常來講，有多個(gè)組件共享狀態(tài)的時(shí)候，把共享的狀態(tài)丟給 vuex 來處理是個(gè)不錯(cuò)的方案。但是在處理上面那個(gè)場景的時(shí)候，會(huì)顯示的有點(diǎn)「笨重」，因?yàn)閭?cè)邊欄實(shí)際上是一個(gè)表單，如果使用 vuex 的話，就需要為每個(gè)選項(xiàng)定義一套 mutation，失去了直接使用 v-model 的便利。

直接使用組件狀態(tài)綁定一個(gè)選項(xiàng)

// sidebar.vue

// ...

data () {

  return {

    message: ''

  }

} 

當(dāng)使用 vuex 綁定一個(gè)選項(xiàng)時(shí)，多了不少「模板」代碼

// 定義 state, mutation

state: {

  message: ''

},

mutations: {

  updateMessage (state, message) {

    state.message = message

  }

}

// sidebar.vue

// ...

computed: {

  ...mapState({

    message: state => state.message

  })

},

methods: {

  updateMessage (e) {

    this.$store.commit('updateMessage', e.target.value)

  }

}

2.將狀態(tài)放到父組件上

如果 sidebar 和 map 有一個(gè)共同的父級，使用這種方式處理起來會(huì)比上面的簡單很多。但是當(dāng)我們的應(yīng)用越來越大的時(shí)候，往往會(huì)把 sidebar 和 map 拆成顆粒度更小的組件，那么通過 props 一層層傳給子組件也會(huì)變的非常麻煩。

3.將組件狀態(tài)「共享」出來

我們通常把組件內(nèi)的狀態(tài)寫成下面這種形式：

// ...

data () {

  return {

     message: ''

  }

}

實(shí)際上，我們可以把 data () {} 中返回的對象單獨(dú)提取到外面，作為一個(gè)變量，像下面這種寫法：

const state = { message: '' }

// ...

data () {

  return state

}

那么在這個(gè)組件初始化過程中，state 對象會(huì)被 vue 「響應(yīng)式化」，這會(huì)引出一個(gè)有趣的事情：任何組件，只要模版中使用了 state.message ，當(dāng) state.message 改變時(shí)，頁面都會(huì)被同步更新。

知道了這個(gè)之后，我們就可以將側(cè)邊欄的狀態(tài)寫成一個(gè)獨(dú)立的文件，作為一個(gè)模塊引入其他組件中，結(jié)構(gòu)如下：

// state.js

export default { message: '' }

// sidebar.vue

import state from 'path/to/state.js'

// ...

data () {

  return { state }

}

// map.vue

// 在模版中使用側(cè)邊欄的狀態(tài)

import state from 'path/to/state.js'

// ...

data () {

  return { state }

},

created () {

  // 將側(cè)邊欄的狀態(tài)作為參數(shù)去請求數(shù)據(jù)

  axios.get('/xxxx', { params: state })

}

這樣做的一個(gè)好處是，既可以在 sidebar.vue 中把 state 當(dāng)作「內(nèi)部」?fàn)顟B(tài)，愉快的使用 v-model 綁定數(shù)據(jù)，map.vue 中也可以方便的拿到 state 做為參數(shù)請求，同時(shí)還可以直接在 map.vue 的模版中使用 ——state.message——。

更進(jìn)一步

上面的方案中，state「響應(yīng)式化」是發(fā)生在子組件初始化的過程中，我希望能在應(yīng)用開始的時(shí)候，主動(dòng)在某個(gè)時(shí)刻完成這一步。這個(gè)時(shí)候就可以借助 Vue 構(gòu)造函數(shù)，像下面這樣：

// store.js

import state from 'path/to/state.js'

new Vue({

  data: {

    state

  }

})

然后在主文件 main.js 中引入 store.js，state 就會(huì)被「響應(yīng)式化」。

關(guān)于“vue狀態(tài)管理實(shí)例分析”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識，可以關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，小編每天都會(huì)為大家更新不同的知識點(diǎn)。