從前整理過vuex，這篇是補充

最簡單的vuex

多個組件共享狀態(tài)時的vuex

初始化

vue create vuex-pro
mannul 裝babel 其余不裝
yarn serve啟動項目

vuex基本使用

yarn add vuex
從前整理的文章，還是這些操作

mapstate

Bar.foo

import { mapState } from 'vuex'

getter

store中的計算屬性

• 基本用法
  準(zhǔn)備數(shù)據(jù)
  
  
  getter中的方法，找到剩余未作的事件數(shù)量

getters: {
    remaining: state => {
      return state.todos.filter(item => item.done === false).length
    }
  }

引入

import {  mapGetters } from 'vuex'

使用

• getter返回函數(shù)
  getter中的方法
  
  
  mapGetters中也要改，剩下具體用法
  

mutations

• 一種推薦的寫法

  
  
  
  
• mutation要遵守vue的響應(yīng)規(guī)則
  需要在對象添加新屬性時
  Vue.set(obj, 'newProp', 123)
  或者
  state.obj = { ...state.obj, newProp: 123 }
• 使用常量替代 Mutation 事件類型
  大型項目使用，人少了就不用
• mapmutations
  可以使用mapmutations在組件中提交mutation，必須是同步的

action

可以包含異步操作

• 基本使用

store.js

  actions: {
    increment( {commit}, {num = 1}) {
      setTimeout(() => {
        commit({
          type: 'increment',
          num
        })
      }, 1000);
    }
  }

視圖層

<button @click="asyncIncre">異步增加</button>

方法

    asyncIncre () {
      this.$store.dispatch('increment', {
        num: 2
      })
    }

• 其余
  mapActions可以取別名
  可以結(jié)合Promise使用
  可以結(jié)合async和await使用
  可以調(diào)用異步api以及分發(fā)多重mutations

Module

將store分割成不同的模塊。結(jié)合mobx里的store理解

即使寫在模塊里，action mutation getter也是全局的，除非加上namespaced: true,，調(diào)用的時候在視圖層{{ $store.getters['foo/abc'] }}即可

購物車案例

vuex插件

自定義
內(nèi)置logger
vuex-persistedstate -- 可以同步狀態(tài)，刷新也不會丟失，類似于結(jié)合localStorage使用

嚴(yán)格模式

表單處理