State

定義狀態 store.js

state: {
    // 待辦事項
    todoList: ["待辦事項A", "待辦事項B"]
}

於元件中使用
因stre中狀態具響應式，直接於 計算屬性(computed) 中引入。

HTML

<li v-for="item in todoList" :key="item">
    {{ item }}
</li>

import

import store from "./store/store.js";

計算屬性

computed: {
    todoList () {
      return store.state.todoList;
    }
}

起前端驗證

mapState輔助函數

取代 return store.state.xxx
自訂計算屬性需透過 ...

import { mapState } from 'vuex'

export default {
    ...others
    computed: {
        ...mapState(['todoList'])
    }
    
};

Getter

store的計算屬性，接受state作為第一個參數
state 的 todoList進行微調

todoList: [
    { id: 1, text: '待辦事項A', done: true },
    { id: 2, text: '待辦事項B', done: false }
],

定義Getter

getters: {
    // vuex 中的計算屬性
    doneTodos: state => {
        return state.todoList.filter(todo => todo.done)
    }
}

以其他getter作為參數

getters: {
    // vuex 中的計算屬性
    doneTodos: state => {
        return state.todoList.filter(todo => todo.done)
    },
    // 以其他getter作為參數
    // 透過 state 才可使用 length 函數
    doneTodosCount: (state, getters) => {
        return getters.doneTodos.length
    }
}

元件計算屬性

todoList() {
    return store.getters.doneTodos;
},
totalDone() {
    return store.getters.doneTodosCount;
},

起前端驗證

透過方法訪問Getter
定義方法於getter

gettodoById: (state) => (id) => {
    return state.todoList.find((todo) => todo.id === id);
},

元件計算屬性

store.getters.getTodoById(1)
// -> { id: 1, text: '待辦事項A', done: true }

mapGetters 輔助函數

同 mapState

import { mapGetters } from 'vuex'

export default {
  computed: {
    ...mapGetters([
      'doneTodos',
      'doneTodosCount'
    ])
  }
}

於不同元件，重新定義getter名稱

...mapGetters([
      doneTodeA: 'doneTodos',
])

剩下留給明天吧

有錯誤請不吝指教!
參考資料
https://vuejs.org/v2/guide
https://medium.com/itsems-frontend/vue-vuex1-state-mutations-364163b3acac
https://ithelp.ithome.com.tw/articles/10185686
https://ithelp.ithome.com.tw/articles/10237349
https://medium.com/itsems-frontend/vue-vuex4-modules-ddb3eec6b834
感謝各路大神