Using Vuex in the development of single-application

If you want to develop a large-scale one-page any serious application, you are probably familiar with the concept of a central data repository for...

Vuex is the official plug-Vue, but not built. You have to decide you needed it in your application or not., And then install it using the NPM.

$ Npm install vuex --save

After installing Vuex, let's create a repository. It's pretty simple: just need to specify the initial state

import Vue from 'vue'
import Vuex from 'vuex'


Vue.use (Vuex);

Creating a repository

At the heart of any Vuex-app store is. "Storage" - this is, put simply, the container that stores the status of your application. Two things distinguish Vuex storage from a simple global object: the reactivity of storage and the inability to change it directly. Instead, we need an explicit call to a mutation that helps to ensure that every change in the storage reserves in the trail system and simplifies debugging

In order to take advantage of the functions provided by Vuex, you first need to create a repository.

const state = {
    authenticated: false,
    user: {},
    profile: {},
}
export default new Vuex.Store ({
    state,
    mutations,
})


Now, for what would have access to the storage you need importrovat it in each component, or you can set it to the root instance Vue, for that would automatically built in to any other component of your application like this. $ Store. We will use the second method.


In fact, now we can not explicitly manipulate the state of the repository. For the state is insulated black box, which prohibits any direct action. What would you consider the data necessary to use special features getters, and to change the state data specific mutations function.

Access to storage

Getters is just a function of the object in your repository that receive state object and return any or its value. Inside your component, you can access via this. $ Store.getters.property as a calculated property.

export const isEmptySearchKey = (store) => {
    return store.search.searchKey! == ""
}


Change store

Direct modification of storage in Vuex done by calling a function called a mutation. Mutations transmitted to the current status and data changes. Mutations should be synchronized and should not return a value. For this you must call the use of mutations. $ store.commit ( 'mutationName')

mutations = {