[30天 Vue学好学满 DAY19] Vuex -2

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
感谢各路大神