Vuex learning memo

vuex is a data storage container, can be accessed globally, for solving the problem of the interaction between the data across multiple layers / multiple components. note! This article is a personal memo is vuex official tutorial study summary to learn by reading this article vuex may cause doubts. The main contents are as follows:

• Registration vuex
• The concept of State - data storage sites
• The concept getters - GET accessor data
• The concept mutations - synchronized set of data access
• The concept Actions - asynchronous data set accessor

Registration vuex

installation

yarn add vuex

registered

import Vuex from 'vuex'
Vue.use(Vuex)

New

// 新建 store
const store = new Vuex.Store({
    state: {
        count: 0
    }
})
// 绑定到 vue 实例中
new Vue({
    router,
    store,
    render: h => h(App),
}).$mount('#app')

State state

vuex save data in their own internal called state , all operations are processed around the "state" carried out. To save vuex efficient use of the code amount and the calculation of the properties vuex design mapSatatemethods, as detailed herein .

New

const store = new Vuex.Store({
    // vuex 将状态保存在 state 对象里
    state: {
        count: 0
    }
})

use

// 组件内部的计算属性
computed: {
    count() {
        // 使用 $store 获取全局的 vuex 容器
        return this.$store.state.count
    }
},

Accessor getters

vuex support provided to get access state, a write in storethe gettersproperty, the additional logic for performing access state, this package may be a common method, for example, screening or statistical quantity. There are two ways, namely, with and without access to parameters parameter access.

Without access parameters

To get some general properties, such as acquisition state length. State is the access module accepts two parameters, a parameter state, all parameters for the second accessor modules getters, the other may be used by the second argument getter. Note that this method can not be behind the increase in the use of (), or will be error.

// 定义
const store = new Vuex.Store({
    state: {
        todoList: [
            {id: 1, text: '第一条', done: true},
            {id: 2, text: '第二条', done: false},
        ]
    },
    getters: {
        getDoneTodo: (state, getters) => {
            return state.todoList.filter(todo => todo.done)
        }
    }
})

// 组件中调用
computed: {
    count() {
        // 直接使用访问器的名称
        return this.$store.getters.getDoneTodo
        // 这种会报错
        // return this.$store.getters.getDoneTodo()
    }
},

Access parameters

Can pass parameters to the accessor to query, you want to support carry parameters need to getterreturn a method:

// 定义
const store = new Vuex.Store({
    state: {
        todoList: [
            {id: 1, text: '第一条', done: true},
            {id: 2, text: '第二条', done: false},
        ]
    },
    getters: {
        // 根据 id 查询数据
        getTodo: state => id => {
            return state.todoList.find(todo => todo.id === id)
        }
    }
})

// 组件中调用
computed: {
    count() {
        return this.$store.getters.getTodo(2)
    }
}

Synchronous setter accessor mutations

mutationsIt is used to modify statethe only means, and which only allows synchronization transaction occurs, because they can not track its status, mutationsmuch like events, even the use of methods and use of $emitemission events like. Note mutations, Modify submitted also responsive, so the need to comply with vue responsive principles, such as modifying the object of a property does not trigger a response, you should use Vue.set () .

mutationsAccepts two parameters, the first parameter is the present state of the module state, the second parameter is mutationsreceived at the call parameters. store.commitThe method also accepts two parameters, a first parameter is the name of the accessor, the second parameter is a parameter to be passed. commit()Also submitted to support object style, and details here .

// 定义
const store = new Vuex.Store({
    state: {
        count: 0,
    },
    mutations: {
        // 将 count 加指定的值，increment 是自定义的访问器名称
        increment(state, payload) {
            state.count += payload.value
        }
    }
})

// 组件中调用
methods: {
    add() {
        // 使用 commit 方法”发射事件“，并传递参数
        this.$store.commit('increment', {
            value: 10
        })
    }
},

If you feel that a store.commitmethod is not intuitive, then, vuex provides a mapMutationsmethod to optimize your code readability

import { mapMutations } from 'vuex'

methods: {
    // 映射指定访问器，以便可以直接用 this.increment 访问
    ...mapMutations([ 'increment' ]),
    // 映射指定访问器，以便可以直接用 this.addNum 访问
    ...mapMutations({ addNum: 'increment' }),
    add() {
        // 这种写法
        this.increment({
            value: 10
        })
        // 等同于
        // this.$store.commit('increment', {
        //     value: 10
        // })
    }
}

Asynchronous set accessor actions

actionsThe wording on one of almost mutationsexactly the same, but also includes a mapActionsusage and on one of mapMutationsthe same. While the difference between the following three points:

• Registration actionThe first argument is accepted by contextthe object, this whole thing with storelike example, but he is the current module "store".
• actionsBy store.dispatchtriggering method instead store.commit, but the specific use of the two of them are the same.
• actionsWhere you can include asynchronous operation, but in the end you still need to use store.committo modify the state.

// 定义
const store = new Vuex.Store({
    state: {
        count: 0,
    },
    // actions 最终还是要靠 mutations 修改数据
    mutations: {
        increment(state, payload) {
            state.count += payload.value
        }
    },
    actions: {
        // actions 里方法可以跟 mutations 同名
        // 因为第一个参数是整个 "store"，所以可以通过解构取出其中的 commit 方法
        increment({ commit }, payload) {
            setTimeout(() => {
                commit('increment', payload)
            }, 1000)
        }
    }
})

// 组件中调用
methods: {
    add() {
        this.$store.dispatch('increment', {
            value: 10
        })
    }
},

You can actionreturn a where Promiseto enabling the caller to continue processing:

// 定义
actions: {
    increment({ commit }, payload) {
        return new Promise((resolve, reject) => {
            setTimeout(() => {
                commit('increment', payload)
                resolve()
            }, 1000)
        })
    }
}

// 调用
this.$store.dispatch('increment', {
    value: 10
}).then(() => {
    ...
})