vuex

1. state

---

mapState({
    count: state => state.count
    // or
    count: 'count'
    // or
    count(state) {
        // 此时 this 为实例
        return state.count + this.xxx
    }
})

computed: {
    // 使用对象展开运算符将此对象混入到外部对象中
    ...mapState(['count', 'num'])
}

2. getter

---

对 state 进行包装

// 定义
new Vuex.Store({
    getters: {
        len: state => {
            state.todos.length
        }

        getTodoById: (state) => (id) => {
             state.todos.find(i => i.id === id)
        }

       getMoneyByLen: (state, getters) => {
             state.price * getters.len
       }
    }
})

// 调用
store.getters.len
store.getters.getTodoById(2)

// 同理
mapGetters({
    ...
})

3. mutation

---

修改 store 中的状态的唯一方法是提交 mutation，且为 同步 修改

// 定义
const store = new Vuex.Store({
    mutations: {
        addone(state, playload) {
             state.count += playload. nums
        }
    }
})


// 调用
store.commit('addone' , {nums: 10})
// or
store.commit({type: 'addone' , nums: 10})

// 同理
mapMutatiobs

当需要在对象上添加新属性时，应该

• 使用 Vue.set(obj, 'newProp', 123)
• 以新对象替换老对象:

  state.obj = { ...state.obj, newProp: 123 }
  

使用产量代理 Mutation 事件名

const AddOne = 'addone'
...
[AddOne](state, playload) {
    ...
}
...

4. action

---

可以异步

// 定义
new Vuex.store({
    actions: {
        addone(context) {
            // 调用 mutation 中的 addone
            context.commit('addond')
        },
        
        add2({ commit, state }, playload) {
            commit('addond', playload)
        }
    }
})

// 调用
store.dispatch('addone', playload)
// or
store.dispatch({ type: 'add2', ...playload })

// 同理
mapActions({
    ...
})

store.dispatch 后返回 promise，
故： store.dispatch('addone').then(log)
同理可以用在 actions 中 dispatch 另一个 action ,然后 .then(...)

5. module

---

// 定义
new Vuex.Store({
    modules: {
        a: {
            namespaced: true,
            state: {},
            getters: {
                len(state, getters, rootState, rootGetters) {...}
            },
            mutations: {},
            actions: {
                addone({state, commit, rootState, rootGetters }) {
                  dispatch('addone')                               //  'a/addone'
                  dispatch('addone', null, { root: true })  //  全局 'addone'
               }
            },
        }
    }
})

// 调用
state.a.xxx
state.getters['a/len']
state.dispatch['a/addone']

// map 函数
...mapState('some/nested/module', {
    a: state => state.a,
    b: state => state.b
  })

...mapActions('some/nested/module', [
    'foo',
    'bar'
])
// or
const { mapState, mapActions } = createNamespacedHelpers('some/nested/module')