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

This article will explain in detail what vuex means in vue. The editor thinks it is very practical, so I share it for you as a reference. I hope you can get something after reading this article.

Concept

     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.

Installation

Introduction of script tags in HTML

Download and install using npm in Vue project (need to install Node environment)

/ / download npm install vuex-- save// install import Vue from 'vue'import Vuex from' vuex'Vue.use (Vuex) Vuex icon

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 cannot 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.

Store

     the core of every Vuex application is store. "store" is basically a container that contains most of the state in your application.

State

     drives the data source of the application, which is used to hold the common data of all components.

Getter

     can understand getter as a computational property of store. The return value of getters is cached based on its dependency and is recalculated only if its dependency value changes.

Mutation

The callback function that changes the data is stored in the      mutations object. The name of this function is officially type. The first parameter is state, and the second parameter is payload, which is a custom parameter. Mutation must be a synchronization function. Methods in the mutations object need to be called using store.commit

Action

     Action submits the mutation instead of directly changing the state. Action can contain any asynchronous operation. Methods in the actions object need to be called using store.dispatch.

The      Action function accepts a context object with the same methods and properties as the store instance, so you can call context.commit to submit a mutation, or you can get state and getters through context.state and context.getters.

Module

Because      uses a single state tree, all the states of the application are concentrated in a larger object. When applications become very complex, store objects are likely to become quite bloated. To solve the above problems, Vuex allows us to split store into modules (module). Each module has its own state, mutation, action, getter, and even nested submodules-- segmented in the same way from top to bottom.

The use of vuex in HTML {{this.$store.state.count}} {{this.$store.getters.synchro}}

Var store = new Vuex.Store ({state: {count: 0}, getters: {synchro (state) {return state.count}}, mutations: {increment (state) {state.count++}) Inreduce (state) {state.count--}, inchange (state, num) {state.count = num}}, actions: {change (context, num) {context.commit ('inchange') Num)}) new Vue ({el:'# app', store, methods: {add () {this.$store.commit ('increment')}, reduce () {this.$store.commit (' inreduce')} ChangeNum () {this.$store.dispatch ('change', 10)}) use of vuex in Vue projects (two)

Write the vuex in the main.js file

Import Vue from 'vue'import App from'. / App'import router from'. / router'import Vuex from 'vuex'// Global State Management Vue.use (Vuex) Vue.config.productionTip = falsevar store = new Vuex.Store ({state: {num: 0}, mutations: {changeNum (state, num) {state.num + = num}) new Vue ({el:' # app', store, router, components: {App}) Template:''})

     is called in the component

{{this.$store.state.count}}

Export default {name:', data () {return {}}, methods: {change () {this.$store.commit ('changeNum', 10)}

Isolate the vuex.

     creates a vuex directory under the src directory, and the new modules directory and index.js files are placed in the vuex directory

     introduces the vuex directory into the main.js file

Import Vue from 'vue'import App from'. / App'import router from'. / router'import store from'. / vuex'Vue.config.productionTip = false/* eslint-disable no-new * / new Vue ({el:'# app', store, router, components: {App}, template:''})

     wrote the following code in index.js

Import Vue from 'vue'import Vuex from' vuex'Vue.use (Vuex) let modules = {} const requireAllModules = require.context (". /", true, /\ .js $/) requireAllModules.keys (). ForEach (key = > {let module = requireAllModules (key). Default if (module & & module.name & & module.namespaced) {modules [module.name] = module}) export default new Vuex.Store ({modules: modules, strict: process.env.NODE_ENV! = "production"})

     creates a new city.js file in the modules directory with the following code

Export default {name: "city", namespaced: true, state: {cityName:', cityCode:''}, getters: {getState (state) {return state}, getCityCode (state) {return state.cityCode}}, mutations: {changeCity (state, cityName) {state.cityName = cityName}

     sets values in the component

Import {mapMutations} from 'vuex' / / introduces vuexexport default {name: "city", data () {return {city: [{id: 1, name:' Beijing'} {id: 2 Name: 'Shanghai'} {id: 3, name: 'Guangzhou'} {id: 4, name: 'Shenzhen'} {id: 5, name: 'Xiamen'} Methods: {/ / modify... mapMutations ({changeCity: "city/changeCity"}) / / the first way of writing handChangeCity (cityName) {this.changeCity (cityName)} / / the second way of writing does not need to use. MapMutations handChangeCity (cityName) {this.$store.commit ('city/changeCity', cityName) }}}

     is used in another component

{{getState.cityName}}

{{getCityCode}}

Import {mapGetters} from 'vuex' / / introduce vuexexport default {data () {return {}} Computed: {/ / first use... mapGetters ({getState: "city/getState"}) / / second use... mapGetters ('city', [' getState' 'getCityCode'])} this is the end of the article on "what does vuex in vue mean?" Hope that the above content can be helpful to you, so that you can learn more knowledge, if you think the article is good, please share it for more people to see.

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.