Vuex

程式設計師的貓發表於2019-10-25

Vuex

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

  • 安裝:npm install vuex --save
  • 此處的狀態即:資料(data中的屬性)
  • 特點:集中式
  • vuex中 store 就是資料(state)儲存的容器
  • 注意:
    • 通過 store.count 來獲取倉庫中的資料(狀態)
    • 必須通過 mutations 中提供的方法來修改資料(狀態)
當一個大型專案功能變得越來越複雜,專案中的元件越來越多
此時,各個元件之間都可能存在相互通訊的問題,如果不處理,那麼各個元件之間就會相互傳遞資料
導致的結果就是,我們專案中的資料就不可預測了。也就是:各個元件相互影響,不知道是哪一個元件
在什麼情況下修改資料
6528244-d1d4012e8fd7c9e4.jpg
散亂的元件.jpg
6528244-163e6395f5538583.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>

相關文章