[TOC] ## 安裝 ``` npm i vuex ``` ## 目錄結構  ## 核心概念 ### Getter - 以`state`數據為基準,創建新的數據 ``` const store = new Vuex.Store({ state: { todos: [ { id: 1, text: '...', done: true }, { id: 2, text: '...', done: false } ] }, getters: { doneTodos: state => { return state.todos.filter(todo => todo.done) } } }) //訪問 this.$store.getters.doneTodosCount ``` ### Mutation - store 中的狀態的唯一方法 ``` const store = new Vuex.Store({ state: { count: 1 }, mutations: { increment (state, n) { state.count += n } }) //調用 store.commit('increment', 10) ``` ### actions Action 可以包含任意異步操作。 Action 提交的是 mutation ## 簡單調用 ``` const Counter = { template: `<div>{{ count }}</div>`, computed: { count () { return this.$store.state.count } } } ``` ## 把state中的值放到計算屬性中 在 vue 中監聽 vuex 值的變化 如: `store/index.js` ``` ... state: { forcedLogin: false, hasLogin: false, userName: "" }, ... ``` 在 `.vue`中 ``` import { mapState } from 'vuex' export default { computed: mapState(['forcedLogin', 'hasLogin', 'userName']), } ``` ## vue中監聽 vuex 屬性的變化 ``` '$store.state.currentGlobal':function () { todo(this.$store.state.currentGlobal); } ```