Vuex

Vuex——状态管理模式

创建

const store = new Vuex.Store({
state: {
        
    },
    mutations: {
            },
    actions: {

    },
    getters: {

    },
    modules: {

    }
})

state

state用来存放状态，也就是变量。Vuex 使用单一状态树，每个应用只对应一个vuex对象。
创建

state: {
        cartList: [],
        aaa: 1
    }

mutations

更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。
创建

mutations: {
        addCount(state, payload) {
            payload.count += 1
        },
        addToList(state, payload) { //state：当前的state，payload：伴随参数(载荷)
            state.cartList.push(payload)
        }
    }

改变状态需要通过commit提交

this.$store.commit('mutations', payload)

getters

类似于Vue实例中的计算方法computed，用于存放一些派生的状态和数据.
创建

  getters: {
    doneTodos: state => {
      return state.todos.filter(todo => todo.done)
    }
  }

actions

用于异步操作，但当有一些逻辑判断的处理时，也应当写入actions中。
创建

actions: {
        addToCartList(content, payload) { //content：当前store对象，payload：载荷
            let oldProduct = null
            for(let item of content.state.cartList) {
                if(item.iid === payload.iid) {
                    oldProduct = item
                }
            }
            if(oldProduct) {
                content.commit('addCount', oldProduct)
            }else {
                payload.count = 1
                content.commit('addToList', payload)
            }
            
        }
    }

提交状态

this.$store.dispatch('increment')

在action中应当有commit操作，使用actions只是在mutation前加了一个action 的操作

modules

将store划分为很多个模块，解决单一状态树带来的臃肿问题。