Vuex

Vuex

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

• 安裝：npm install vuex --save
• 此處的狀態即：資料（data中的屬性）
• 特點：集中式
• vuex中 store 就是資料（state）儲存的容器
• 注意：
  • 通過 store.count 來獲取倉庫中的資料（狀態）
  • 必須通過 mutations 中提供的方法來修改資料（狀態）

當一個大型專案功能變得越來越複雜，專案中的元件越來越多
此時，各個元件之間都可能存在相互通訊的問題，如果不處理，那麼各個元件之間就會相互傳遞資料
導致的結果就是，我們專案中的資料就不可預測了。也就是：各個元件相互影響，不知道是哪一個元件
在什麼情況下修改資料

散亂的元件.jpg

用vuex來管理元件讓它們集中起來.jpg

1.建立store/index.js

// 1 匯入 vue
import Vue from 'vue'
// 2 匯入 vuex
import Vuex from 'vuex'
// 安裝 vuex 外掛
Vue.use(Vuex)

const store = new Vuex.Store({
  // 資料（狀態）
  // 讀取資料：store.state.count
  state: {
    count: 10
  },

  // 用來運算元據的方法
  // 修改資料：store.commit('addCount', 引數)
  mutations: {
    addCount(state, arg) {
      // 引數：state表示 上面的 state物件
      // 實現 count +1
      // state.count++
      state.count += arg.count
      console.log(arg.abc);
      console.log('這是通過 mutations 中的addCount 方法修改了count值');
    }
  }
})

export default store

2.在 Vue 例項中通過 store 將 vuex 與例項掛到一起

// 匯入 vuex
import store from '../store'

// 3 將Vue例項與 App 掛到一起
const vm = new Vue({
  el: '#app',
  router,
  // 將 vuex 與例項掛到一起
  store,
  render: c => c(App)
})

3.呼叫 store 中的資料

<script>
 /* // 測試 vuex
    fn() {
      // 呼叫 store 中的方法
      this.$store.commit('addCount', { count: 2, abc: 'aaa' })
    }, */
</script>

4.展示 store 中的資料

<template>
   測試：
              展示 store 中的資料
              <mt-button type="danger" @click="fn">測試vuex</mt-button>
              {{ $store.state.count }}
</template>