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

What is the core concept and basic use of vuex? I believe many inexperienced people are at a loss about it. Therefore, this paper summarizes the causes and solutions of the problem. Through this article, I hope you can solve this problem.

Introduction

Vuex is a mechanism to realize the global state (data) management of components, and it is convenient to realize data sharing among components.

Start installation

① direct download mode

Create a vuex.js file to put the contents of the https://unpkg.com/vuex URL into that folder.

② CND mode ③ NPM mode npm install vuex-- save ④ Yarn mode yarn add vuexNPM installation mode

1. Create a store / index.js folder in the scr file and write the following.

Import Vue from 'vue'import Vuex from' vuex'Vue.use (Vuex) export default new Vuex.Store ({state: {}, mutations: {}, actions: {}, modules: {}})

two。 Introduce it into main.js and mount it to Vue instance

Import Vue from 'vue'import store from'. / store'new Vue ({render: h = > h (App), store}). $mount ('# app') store concept and usage concept:

Is the sharing of data between components.

Only mutations can modify the data in store

Use:

Define before you use

Define state: {num: 0} use

Method 1 (recommended)

{{numAlias}} import {mapState} from 'vuex'export default {/ / calculation function computed: mapState ({/ / string parameter' count' is equivalent to `state.count` numAlias: 'num',// commonly used key is a self-named data / / arrow function received by random value to make the code more concise count: state = > state.count, / / in order to be able to use `this` to get the local state You must use the regular function countPlusLocalState (state) {return state.count + this.localCount} / / you can define the rest of the calculation function}), or / or the calculation function computed: {mapState (['count'])}}

Mode 2

{{$store.state.count}} mutations concept and usage concept:

Modify the data in store, strictly stipulate that the data in store cannot be modified in the rest, and do not perform asynchronous operations in mutations.

Mutation must be executed synchronously, not asynchronously.

Use:

Define a method before you use it

Define mutations: {/ / increment custom method store parameter is store data, parameter parameter is received data, but do not use increment (state, parameter) {/ / change state state.num++}}

Method 1 (recommended)

Import {mapState, mapMutations} from 'vuex'// method methods: {... mapMutations ([/ / mutations custom method name' increment']), love () {/ / directly this calls this.increment ('data to be passed, but not') this.increment ('Bin')}}

Mode 2

Methods: {love () {/ / this.$store.commit ('custom name', 'data passed but not passed') this.$store.commit ('increment',' data')}} action concept and usage concept:

Used to handle asynchronous operations.

If you change the data through asynchronous operations, you must go through action instead of using mutation, but you still have to change the data indirectly in action by triggering mutation.

Action is similar to mutation, except that:

Action submits the mutation instead of directly changing the data (state).

Action can contain any asynchronous operation.

Define mutations: {/ / increment custom method store parameter is store data, parameter parameter is received data, but do not increment (state, parameter) {/ / change state state.num++}}, actions: {/ / add custom method context is parameter It can be used as an instance of vuex add (context) {/ / can be used through context.commit ('methods to be called in mutations') context.commit ('increment')}}

Method 1 (recommended)

Import {mapState, mapMutations, mapActions} from 'vuex'export default {methods: {... mapActions ([' add', / / mapping `this.add () `to `this.$store.dispatch ('add')` / / `mapActions` also supports payload:' add' / / maps `this.add (amount) `to `this.$store.dispatch ('add', amount)`]) .. mapActions ({add: 'add' / / Map `this.add () `to `this.$store.dispatch (' increment')`}), and love () {/ / directly this calls this.add ('data to be passed, but not') this.add (data)}

Mode 2

Methods: {love () {/ / this.$store.dispatch ('custom name', 'data passed but not passed') this.$store.dispatch ('add', data)}} getters concept and usage concept:

Getter is used to process the data in store to form new data. Getting can process the existing data in store to form new data, similar to the computational abbreviation of Vue.

Define state: {num: 0}, getters: {doneTodos: state = > {return state.num = 10}} to use

Method 1 (recommended)

{{doneTodos}} import {mapState, mapMutations, mapActions, mapGetters} from 'vuex'export default {/ / calculation function computed: {. MapState ([' count']),... mapmapGetters (['doneTodos'])}}

Mode 2

{{$store.getters.doneTodos}} after reading the above, have you mastered the core concepts of vuex and how to use it? If you want to learn more skills or want to know more about it, you are welcome to follow the industry information channel, thank you for reading!

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.