What is the usage of store in vue?

In Vue, the store is used to manage state, share data, and manage external states between various components. The store is the core of the Vuex application, which is a container that contains most of the state and changes in the application. The only way to maintain state in the store is to submit a mutation.

The operating environment of this article: Windows 10 system, Vue version 2.9.6, DELL G3 computer.

What is the usage of store in vue

Vuex is a state management model specially developed for Vue.js applications. It uses centralized storage to manage the state of all components of the application, and uses corresponding rules to ensure that the state changes in a predictable way.

The core of every Vuex application is the store (warehouse). A "store" is basically a container that contains most of the state in your application. Vuex differs from simple global objects in the following two points:

Vuex’s state storage is responsive. When a Vue component reads state from the store, if the state in the store changes, the corresponding component will be efficiently updated accordingly.

You cannot directly change the state in the store. The only way to change the state in the store is to explicitly commit a mutation. This allows us to easily track every state change, allowing us to implement some tools to help us better understand our application.

The core concept of store

state represents the state in the store, similar to the data attribute in the vue instance.

Mutation

The only way to change the state in the Vuex store is to submit a mutation.

Mutations in Vuex are very similar to events: each mutation has a string event type (type) and a callback function (handler). This callback function is where we actually make state changes, and it will accept state as the first parameter

Action

Action is similar to mutation, but the difference is:

Action What is submitted is a mutation, not a direct change of state.

Action can contain any asynchronous operation.

An example

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  },
  actions: {
    increment (context) {
      context.commit('increment')
    }
  }
})

Usage of store

Before using store, you must first install vuex:

npm install vuex

After installing Vuex, Let's create a store. Creation is straightforward - just provide an initial state object and some mutations.

Create a new store folder, and then create a new index.js file:

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
    state: {
        count: 0
    },
    mutations: {
        increment(state){
            state.count++;
        }
    }
})

In order to access this.$store property in the Vue component, you need to provide the created store for the Vue instance. Vuex provides a mechanism to "inject" the store from the root component to all sub-components in the form of store options.

That is, import it in the main.js file and register it in the vue root instance:

import store from './store'
...
new Vue({
    el: "#app",
    store: store,
...

Then you can pass store.commit(' under the methods method attribute of any vue component increment') to call:

        ...
        methods:{
            increment:function(){
                this.$store.commit("increment");
                console.log(this.$store.state.count);
            },
            ...

The effect is as follows:

[Related recommendation: "vue.js Tutorial"]

The above is the detailed content of What is the usage of store in vue?. For more information, please follow other related articles on the PHP Chinese website!