1.Vuex通常在main.js內就被引入了(store)，除map外無須另外引入

import { mapState, mapMutations } from "vuex";

2.store架構

import { createStore } from "vuex";

export default createStore({
  // state 相當於data() 資料變數放這~
  state: {
    name: "茸茸鼠",
    age: 15,
  },

  getters: {
    // 似Vuex內的computed
    // 僅能渲染，無法變更state
  },

  mutations: {
    // mutations 方法 改變 state內資料
  },
  actions: {
    // 1. actions似mutation但不能改變state
    // 2. actions用於非同步(Axios)
  },
  modules: {
    // 模組化 可以放state、getters、mutations、actions
    // 似composition，整理用
  },
});

3.對照組 store vs. view > XXX.vue

state、getters、mutations、actions、modules皆有map
map功能：用[]裝所有的該方法

(1) state:{}

似data()，存放要傳遞的資料

有...mapState(["name","age","price"]),

(2) getters:{}

似computed，監聽並須return，不可改變State

a. 製作欲傳遞的資料，參數放functions()內傳遞
b. 於欲渲染葉面，渲染都要透過computed並須return
c. mapGatter 放將getters放於[]內，就無需寫很多function

    ...mapGetters(
      ["sellingPrice80Off","sellingPrice70Off"]
      ),

等同

    sell80off(){
      return this.$store.getters.sellingPrice80Off;
    },
    sell70off(){
      return this.$store.getters.sellingPrice70Off;
    },

d. 變更名稱
e. ...必要，否則只放得下一個map

(3) mutations　

似方法可改變State

a. 渲染頁製作倉庫，先抓store內的state資料渲染在畫面上
b. 觸發方法，使渲染畫面與store連接、傳值達mitt效果
this.$store.commit("function名稱", 傳送的值)
c. store接收值，並改變store內的State
ifDrinkMilk(store的State, commit傳過來的值)
State.yourCup = reciveCommit;
d. 渲染回頁面
e. mapMutations參數傳遞放渲染處

(4) actions

跟 mutations 類似，但他不能直接操作state裡的資料
執行非同步的任務，再將結果提交給mutations去更改state狀態

actions 搭配 context(內建方法) 方法有２：commit、dispatch
a. context.commit("方法名稱", "要傳入的資料");
給mutations　

b. context.dispatch("方法名稱", "要傳入的資料");
給actions內

補充：
$store.commit
給mutations　

$store.dispatch
給actions內

結論commit給mutations、dispatch給actions

(5) modules

模組化

4.rootstate

可以拿到根部、根元件的state與同層(隔壁的)state

    getRealAge(state, getters, rootState) {
      return rootState.age;
    },

//根部
export default createStore({
  state: { name: "原stateName", age: 30, hhh:123 },
  mutations: {},
  actions: {},
  modules: {
    userA: moduleA,
    userB: moduleB,
  },
});

5.namespaced

方法同名時，namespaced可做區隔