Shulou(Shulou.com)06/01 Report--

This article mainly explains "how to use store in vue". Interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Let the editor take you to learn how to use store in vue.

In vue, store is used to manage state, share data and manage external state between components. Store is the core of vuex application, that is, a container, which contains most of the state in the application. The only way to change the state in store is to submit mutation.

This article operating environment: windows10 system, Vue2.9.6 version, DELL G3 computer.

What is the use of store in vue

Vuex is a state management model developed specifically 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 store. "store" is basically a container that contains most of the state in your application. A Vuex differs from a simple global object in the following two ways:

The state storage of Vuex is responsive. When the Vue component reads the state from the store, if the state in the store changes, then the corresponding component will be updated efficiently accordingly.

You can't directly change the state in store. The only way to change the state in store is to commit the mutation explicitly. This makes it easy for us to track changes in each state, allowing us to implement tools to help us better understand our applications.

Core concepts of store

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

Mutation

The only way to change the state in the store of the Vuex is to commit the mutation.

Mutation in Vuex is very similar to events: each mutation has an event type of a string (type) and a callback function (handler). This callback function is where we actually make the state change, and it accepts state as the first argument

Action

Action is similar to mutation, except that:

Action submits the mutation instead of directly changing the 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')})

The usage of store

Before using store, install vuex:

Npm install vuex

After installing Vuex, let's create a store. The creation process is straightforward-- you only need to provide an initial state object and some mutation.

Create a new store folder and then 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 as a store option from the root component to all subcomponents.

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

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

It can then be called through store.commit ('increment') under the methods method property of any vue component:

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

The effect is as follows:

At this point, I believe you have a deeper understanding of "how to use store in vue". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.