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

This article mainly shows you "how to use vuex in Vue projects", the content is easy to understand, clear, hope to help you solve your doubts, the following let the editor lead you to study and learn "how to use vuex in Vue projects" this article.

What is Vuex?

TIP? The official website explains: 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.

We can use Vuex when we have multiple pages that need to share data. For example:

User's personal information management module

From the order settlement page, go to the select coupon page and select the coupon page. How do I save the selected coupon information? State saves the coupon information, when selecting the coupon, mutations submits, on the order settlement page, obtains the selected coupon, and updates the order discount information.

The shopping cart module calls the interface to get the number of shopping carts every time, and the effect is achieved, but every HTTP request consumes the performance of the browser.

In my order module, the order list also clicks to cancel the order, and then updates the corresponding order list. In this case, Vuex,state is also used to save a state, monitor the status, and update the corresponding list when the change occurs.

The basic idea behind Vuex draws lessons from Flux and Redux. Unlike other patterns, Vuex is a state management library specially designed for Vue to take advantage of Vue.js 's fine-grained data response mechanism for efficient state updates.

Vuex life cycle chart

My store directory

Modules is the storage of different modules

Action-types.js is to facilitate management, string mapping, standardized management.

Mutation-types.js is also for ease of management, so imagine how bad it is to have a bunch of functional modules mixed together.

Index.js

Implement an example of vuex

Let's create these files

Action-types.js

/ / get user information export const QUERY_USER_INFO = "QUERY_USER_INFO"

Mutation-types.js

/ / set user information export const SET_USER_INFO = 'SET_USER_INFO'

Create a base.js file under modules

Base.js

Import {QUERY_USER_INFO} from'.. / action-types'import {SET_USER_INFO, SET_CUR_MENU_ID} from'.. / mutation-types'import api from'@ / assets/js/api.js'// create stateconst state = {/ / user information userInfo: {},} / / get data asynchronously, commit to mutations Mutations change stateconst actions = {/ * get user information * / [QUERY_USER_INFO] ({commit}, params) {return api.get ({url:'/ system/getUser',}, params.vm) .then (data = > {commit (SET_USER_INFO) Data) return data})} const getters = {/ / current user information userInfo: state = > state.userInfo} / / synchronous acquisition const mutations = {[SET_USER_INFO] (state, data) {state.userInfo = data}} export default {state, actions, getters, mutations}

Index.js

Mport Vue from "vue" import Vuex from "vuex" import base from ". / modules/base.js" Vue.use (Vuex); export default new Vuex.Store ({modules: {base}})

Header.vue

{{$store.getters.userInfo.name}}

Main.js

Import Vue from 'vue'import store from'. / store'import {QUERY_USER_INFO} from'@ / store/action-types.js'store.dispatch (QUERY_USER_INFO, {}). Finally (()) = > {new Vue ({router: router (store), store, render: h = > h (App)}). $mount ('# app')}) above are all the contents of the article "how to use vuex in Vue projects" Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

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.