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 = {