vue狀態管理(vuex的簡介和五個屬性)

爲什麼使用vuex？？？？

在vue開發中，每個組件都有自己獨立的數據，整個項目中的所有組件可以通過總線傳值，但是如果出現幾個組件需要共用同一組數據時，數據管理就會非常麻煩。

vuex簡介

vuex是vue的狀態 (數據) 管理工具。它採用了一種集中管理數據的思想，將整個項目中所有的公共數據放在一個統一的倉庫中。然後所有組件都可以從這個倉庫中讀取數據，也可以通過倉庫提供的方法修改數據。

vuex的五個屬性和基本用法

state, getters, mutations, actions, modules。

1. state：vuex的基本數據，用來存儲變量
2. getters：從基本數據(state)派生的數據，相當於state的計算屬性
3. mutations：提交更新數據的方法，必須是同步的(如果需要異步使用action)。每個 mutations 都有一個字符串的 事件類型
   (type) 和 一個 回調函數 (handler)。 回調函數就是我們實際進行狀態更改的地方，並且它會接受 state
   作爲第一個參數，提交載荷作爲第二個參數。
4. actions：和mutation的功能大致相同，不同之處在於 ==》
   >>. Action 提交的是 mutation，而不是直接變更狀態。
   >>. Action 可以包含任意異步操作。
5. modules：模塊化vuex，可以讓每一個模塊擁有自己的state、mutation、action、getters,使得結構非常清晰，方便管理。

使用下面這兩種方法存儲數據：

dispatch：異步操作，寫法： this.$store.dispatch(‘mutations方法名’,值)

commit：同步操作，寫法：this.$store.commit(‘mutations方法名’,值)

vuex安裝

在網上看到的三種安裝方式，我只用過npm安裝

• 在 Vue 之後引入 vuex 會進行自動安裝：

<script src="/path/to/vue.js"></script>
<script src="/path/to/vuex.js"></script>

1. npm安裝

npm install vuex --save

1. yarn安裝

yarn add vuex

main.js導入

import store from "./store.js";
//導入後在根組件注入
new Vue({
  router,
  render: h => h(App),
  // 在根組件中注入倉庫對象
  store
}).$mount('#app')