(旺財記賬項目)Vue 全局數據管理（下）之Vuex

1. Vuex 就是一個數據讀寫工具

2. 引用了之後就可以讀

3. 大概使用方法

const store = new Vuex.Store({
  state: { // data,也就是數據
    count: 0
  },
  mutations: {
    increment(state, n: number) { // methods,也就是對數據的改動
      state.count += n
    }
  }
})

console.log(store.state.count) // 0

// store.mutations.increment(store.state),這個封裝成了commit
store.commit('increment',10) // +1 commit 就是調用api
// 函數名叫type, 參數叫payload
console.log(store.state.count) // 1

export default store;

4. 單一狀態樹的意思

• 就是一個對象,應用層級狀態就是所有組件的數據

5. Vue.use(Vuex)做了一些什麼

• 把 store 綁到 Vue.prototype.$store上，也就是初始化的時候 Vue.prototype.$store = store

6. Vuex,在.vue 文件中實現+1 的兩種方法

• 方法一

  <button @click = "add">+1</button>

  add(){
    store.commit('increment',1)
  }

• 方法二

  <button @click = "$store.commit('increment',2)">+1</button>

7. Vuex 如何進行讀和寫

• 讀的時候用 computed
• 寫的時候配合 commit

8. action 就是異步的調用 method

9. 在 ts 中使用 mixin

https://class-component.vuejs.org/guide/extend-and-mixins.html#mixins

10. 重構 EditLabel.vue

• store.commit 沒有返回值

11. Vuex使用套路

最後,個人微信,歡迎交流！