簡單聊一聊Vuex的原理

前面有座山發表於2018-09-14
Vue

學習Vue最權威的毫無疑問是它的官方文件

Vue點選：cn.vuejs.org/v2/guide/in…

Vuex連結：vuex.vuejs.org/zh/guide/

面對一些Vue的初學者，如何進行元件之間的資料傳遞是一個較為難理解的部分，剛開始接觸，可能在互動的過程中會將自己繞迷，那麼針對一些問題Vue有自己的一套技術棧，其中Vuex就是Vue的狀態管理模式。

Vuex：可以理解為Vue的狀態管理模式，它採用集中式儲存管理應用的所有元件的狀態，並以相應的規則保證狀態以一種可預測的方式發生變化

狀態管理很好理解，可以簡單的認為管理資料或者引數的的變化。在官方文件上面也說明了Vuex和單純的全域性物件有一下不同：

1、Vuex 的狀態儲存是響應式的。當 Vue 元件從 store 中讀取狀態的時候，若store中的狀態發生變化，那麼相應的元件也會相應地得到高效更新。

2、你不能直接改變 store 中的狀態。改變 store 中的狀態的唯一途徑就是顯式地提交 (commit) mutation。

那麼我們可以用張圖來形象的解析在Vue中的狀態變化

簡單聊一聊Vuex的原理
state，驅動應用的資料來源。
view，以宣告方式將 state 對映到檢視；
actions，響應在 view 上的使用者輸入導致的狀態變化。

簡單的來理解一下：state中放入初始資料，然乎通過action來改變state狀態，view需要從state中拿資料，將其渲染到介面中，如果通過介面修改了資料，那麼它是通過action去改變的state中的資料狀態，然後view在state中再次取一次資料，也就是說它是一個單向資料流，下面它的任何的資料傳輸都離不開這個圖。

我們用一個計算器的例子來進一步瞭解一下。

先使用Vue建立一個專案，將這裡需要的包都裝好，如何建立Vue專案這裡就不詳細說了，不熟悉的可以點選這裡瞭解一下：www.cnblogs.com/chengdabeli…

1、建立狀態管理倉庫---store，並且放入全域性中

簡單聊一聊Vuex的原理

//匯入
import Vuex from 'vuex'
import Vue from 'vue'
//例項化
const store  = new  Vuex.Store({
  //設定資料初始狀態
  state:{
    count : 0,
    price: 30
  },
 })
複製程式碼

簡單聊一聊Vuex的原理

2、在元件中渲染資料,同時新增了操作事件

<div>
    <button @click="reduce">-</button>
    <strong>{{$store.state.count}}</strong>
    <button @click="add">+</button>
    <button @click="hendlebro">兄弟元件傳值</button>
  </div>
</template>

<script>
    export default {
      methods:{
        reduce(){
          this.$store.commit('REDUCE_COUNT')
        },
        add(){
          this.$store.commit('ADD_COUNT')
        },
        hendlebro(){
          this.$bus.$emit('toData',this.msg)
        },
      },
        name: "comB"
    }
</script>

<style scoped>

</style>
複製程式碼

3、action提交事件，修改狀態，view獲取新的資料。

  //同步提交事件
  mutations:{
    "ADD_COUNT"(state){
      state.count++
    },
    "REDUCE_COUNT"(state){
      state.count--
    },
    "CHANGE_COUNT"(state,payload){
      state.count = payload;
    }
  },
複製程式碼

4、啟動專案，npm start

當然這只是Vuex最簡單的一個原理，還有別的傳值方式，比如中央事件匯流排傳值和兄弟元件傳值等。

原始碼已上傳github：github.com/YangYhx/Vue…

相關文章