vue狀態管理實例分析

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

場景：一個地圖應用，有個側邊欄，側邊欄里面放著很多選項，選項改變的時候，應用會根據側邊欄的條件請求數據，然后在地圖上放 markers 。頁面可以簡單抽象成如下結構：

// App.vue

<div>

  <sidebar></sidebar>

  <map></map>

</div>

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

1.直接上 vuex

通常來講，有多個組件共享狀態的時候，把共享的狀態丟給 vuex 來處理是個不錯的方案。但是在處理上面那個場景的時候，會顯示的有點「笨重」，因為側邊欄實際上是一個表單，如果使用 vuex 的話，就需要為每個選項定義一套 mutation，失去了直接使用 v-model 的便利。

直接使用組件狀態綁定一個選項

// sidebar.vue

<input v-model="message">

// ...

data () {

  return {

    message: ''

  }

} 

當使用 vuex 綁定一個選項時，多了不少「模板」代碼

// 定義 state, mutation

state: {

  message: ''

},

mutations: {

  updateMessage (state, message) {

    state.message = message

  }

}

// sidebar.vue

<input :value="message" @input="updateMessage">

// ...

computed: {

  ...mapState({

    message: state => state.message

  })

},

methods: {

  updateMessage (e) {

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

  }

}

2.將狀態放到父組件上

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

3.將組件狀態「共享」出來

我們通常把組件內的狀態寫成下面這種形式：

// ...

data () {

  return {

     message: ''

  }

}

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

const state = { message: '' }

// ...

data () {

  return state

}

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

知道了這個之后，我們就可以將側邊欄的狀態寫成一個獨立的文件，作為一個模塊引入其他組件中，結構如下：

// state.js

export default { message: '' }

// sidebar.vue

<input v-model="state.message" />

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

// ...

data () {

  return { state }

}

// map.vue

// 在模版中使用側邊欄的狀態

<div>{{ state.message }}</div>

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

// ...

data () {

  return { state }

},

created () {

  // 將側邊欄的狀態作為參數去請求數據

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

}

這樣做的一個好處是，既可以在 sidebar.vue 中把 state 當作「內部」狀態，愉快的使用 v-model 綁定數據，map.vue 中也可以方便的拿到 state 做為參數請求，同時還可以直接在 map.vue 的模版中使用 &mdash;&mdash;state.message&mdash;&mdash;。

更進一步

上面的方案中，state「響應式化」是發生在子組件初始化的過程中，我希望能在應用開始的時候，主動在某個時刻完成這一步。這個時候就可以借助 Vue 構造函數，像下面這樣：

// store.js

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

new Vue({

  data: {

    state

  }

})

然后在主文件 main.js 中引入 store.js，state 就會被「響應式化」。

關于“vue狀態管理實例分析”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識，可以關注億速云行業資訊頻道，小編每天都會為大家更新不同的知識點。