Before the beginning, fresh gram has an end

A long journey begins at a single step

1. Concept 👀

A vUE plug-in that implements centralized state (data) management in VUE, centralized management (read/write) of the shared state of multiple components in VUE application, is also a way of communication between components, and is suitable for communication between any components.

2. Come up

Used when multiple components need to share data;

🟢 Note:

1. Sharing:

A. Multiple components depend on uniform state; B. Behavior from different components needs to change the same state.Copy the code

2. Although multi-component data sharing can be realized through the global event bus, it needs to be distributed and monitored constantly in the components, which makes it troublesome and difficult to maintain, as shown below:

3, use,vuexUnified management, different components can be two-way data operation, elegant and efficient, see the following:

3. Working principle diagram of VUEX 👇

🟢 Of note:

1. Actions Not superfluous:

When you clearly know the parameter value that needs to be transferred, you can skip the operation of dispatching a function located in Actions in the code, and directly trigger the corresponding function inside Mutations to process the corresponding logic to achieve the same effect through COMMIT.

But if the parameter needs to be known by an asynchronous operation such as calling an interface or if there are certain business logic conditions, Actions are necessary because business logic operations are best coded in Actions.

2. The three important parts of VUex in the green dotted line are managed by the Store, because the three apis of Dispatch, Commit and Mutate are provided by the Store.

3, all operations can be normal premise: all components have or can see the store object;

4. Build vuEX environment 🚴♀️

The environment can be built in a variety of ways, such as:

1. You can manually configure vuEX and create projects directly from the SCAFFOLDING UI;

Use (Vuex) to create a file that looks like this:

🟢 Note:

The reason the vue.use (Vuex) code at the green arrow is in store/index.js, [vuex] must call vue. use(vuex) before creating a store instance. Error, the specific reason: the main js import import code will be unified in the priority – the execution mechanism of scaffolding, scanning the current file all of the code, the import of the imported code will refer directly to the front;

3、…

5. Actual combat 🚀

🟢 Note:

Because vuEX is more operable, it is difficult to describe one by one in this article. The code involved (with clear annotations) has been uploaded to Gitee and has been open source. If you are interested in watching it, please help yourself.

Portal: gitee.com/tu_song/vue…

6. Summary 🌊

1. Use of four MAP methods

1.1, mapState

Used to help us map the data in state to computed properties

computed: {
    // Use mapState to generate calculation attributes: sum, school, subject. mapState({sum:'sum'.school:'school'.subject:'subject'}),
         
    // Use mapState to generate calculation properties: sum, school, subject. mapState(['sum'.'school'.'subject']),},Copy the code

1.2, mapGetters

Used to help us map the data in getters to computed properties

computed: {
    // Generate calculated properties with mapGetters: bigSum. mapGetters({bigSum:'bigSum'}),
​
    // Generate calculated properties with mapGetters: bigSum. mapGetters(['bigSum'])},Copy the code

1.3, mapActions

A method to help us generate a dialogue with actions, that is, a function containing $store.dispatch(XXX)

methods:{
    // Generate from mapActions: incrementOdd, incrementWait (object form). mapActions({incrementOdd:'jiaOdd'.incrementWait:'jiaWait'})
​
    // Generate from mapActions: incrementOdd, incrementWait. mapActions(['jiaOdd'.'jiaWait'])}Copy the code

1.4, mapMutations

The method used to help us generate the mutations dialogue, that is, a function containing $store.mit (XXX)

methods:{
    // Create by mapActions: Increment and Decrement (in object form). mapMutations({increment:'JIA'.decrement:'JIAN'}),
    
    // rely on mapMutations to generate: JIA, JIAN. mapMutations(['JIA'.'JIAN']),}Copy the code

Note: When using mapActions and mapMutations, if the parameters need to be transferred, the parameters need to be passed when the event is bound in the template, otherwise the parameters are event objects.

2. Enable modularity + namespace

2.1 Purpose:

To make the code more maintainable, to make the various data categories more explicit, modify the store.js file:

const countAbout = {
  namespaced:true.// Enable the namespace
  state: {x:1},
  mutations: {... },actions: {... },getters: {
    bigSum(state){
       return state.sum * 10}}}const personAbout = {
  namespaced:true.// Enable the namespace
  state:{ ... },
  mutations: {... },actions: {... }}const store = new Vuex.Store({
  modules: {
    countAbout,
    personAbout
  }
})
Copy the code

2.2. Read state data

(Component with namespace enabled)

// Method 1: Read directly by yourself
this.$store.state.personAbout.list
// Use mapState to read:. mapState('countAbout'['sum'.'school'.'subject']),
Copy the code

2.3. Read getters data

(Component with namespace enabled)

// Method 1: Read directly by yourself
this.$store.getters['personAbout/firstPersonName']
// Use mapGetters to read:. mapGetters('countAbout'['bigSum'])
Copy the code

2.4. Call Dispatch

(Component with namespace enabled)

// Dispatch directly
this.$store.dispatch('personAbout/addPersonWang',person)
// Use mapActions:. mapActions('countAbout', {incrementOdd:'jiaOdd'.incrementWait:'jiaWait'})
Copy the code

2.5. Call commit

(Component with namespace enabled)

// Method 1: Commit yourself
this.$store.commit('personAbout/ADD_PERSON',person)
// Solution 2: use mapMutations:. mapMutations('countAbout', {increment:'JIA'.decrement:'JIAN'}),
Copy the code

3. Others ✨

3.1,NanoID— random ID generation library:

Portal: zhuanlan.zhihu.com/p/387924041

Specific use:

All you need to do is install the Nanoid NPM library using the NPM I nanoid command and use it in your project

import { nanoid } from 'nanoid';
id = nanoid();
Copy the code

3.2 Return any copywriting interface:

Portal: api.uixsj.cn/hitokoto/ge…

🚀🚀🚀 This article is mainly used for personal practice records, shortcomings, please make corrections!