結構

主要可以分為四個部分「state」、「getters」、「mutation」、「actions」，接著我們就一一的了解他們的功能吧!

1. State

就是昨天說的倉庫!!

首先，把需要共用的資料放入state中

// src/store/index.js
import { createStore } from 'vuex'

export default createStore({
  state: {
    greeting: 'hello vuex'
  }
})

再來修改App.vue，用computed方式向倉庫取得資料

<template>
  <h1>{{ greeting }}</h1>
</template>

<script>
export default {
  name: "App",
  computed: {
    greeting() {
      return this.$store.state.greeting;
    },
  },
};
</script>

mapState

共用的資料在未來可能會愈來多，一筆筆使用computed取得變得很麻煩，透過mapState可以一次引入多筆。

// src/store/index.js
state: {
    greeting: 'hello vuex',
    year: 2021,
    month: 'Oct'
},

用mapState傳入陣列，使用之前要先import進來

import { mapState } from "vuex";

export default {
  name: "App",
  computed: mapState(["greeting", "year", "month"]),
};

但是這樣的寫法會將整個元件的computed吃掉，若要增加其他屬性就必須用解構語法，才可以同時保有mapState和元件本身的computed屬性。

import { mapState } from "vuex";

export default {
  name: "App",
  computed: {
		...mapState(["greeting", "year", "month"]),
		name(){
			return '$(this.name) is awesome'
		}
	}
};

除了使用陣列之外，也可以使用物件指定元件立面的key

computed: {
	...mapState({
		greetingWord:"greeting"
	}),
}

//or 函式形式
computed: {
	...mapState({
		greetingWord:state => state.greeting
	}),
}

2. getters

getters的角色就像是store中的computed

書中範例 :

state: {
    product: 't-shirt',
    price: 500,
    quantity: 100
 },

想針對這個商品做促銷，從state中取得資料後再自己使用computed計算

computed: {
  ...mapState(["product", "price", "quantity"]),
  sellingPrice() {
    //八折優惠
    return this.price * 0.8;
  },
},

可是這個促銷價會出現在網頁其他的元件內，若每個元件都要寫一次打八折很有可能出現不一致的錯誤，為了「單一資料來源」原則，我們應該先做計算，元件直接取計算後的值比較好，getters就在此出場拉!

// src/store/index.js
state: {
    product: 't-shirt',
    price: 500,
    quantity: 100
  },
getters: {
  sellingPrice(state) {
    //八折優惠
    return state.price * 0.8;
  },
},

//App.vue
computed: {
  ...mapState(["product", "price", "quantity"]),
  sellingPrice() {
    //八折優惠
    return this.$store.getters.sellingPrice;
  },
},

另外，getters除了有取得state資料的功能外，他也可以取其他getters的資訊。接續範例，商品售價依照庫存決定，庫存少於50打八折，否則打九折。

state: {
    product: 't-shirt',
    price: 500,
    quantity: 100
  },
getters: {
  discount(state) {
    return (state.quantity > 50) ? 0.8 : 0.9
  },
  sellingPrice(state, getters) {
    return state.price * getters.discount
  },
},

mapGetters

概念和用法和mapState一樣(要記得import)

computed: {
	...mapState([
	  product: 't-shirt',
    price: 500,
    quantity: 100
	]),
	...mapGetters([
	 'sellingPrice'
	]),
}

今天時間有點來不及，剩下的部分明天繼續!!!!