Example of module usage of vuex

I want to try using vuex module to operate. After reading some information, I simply simplified it

Directory structure:

store
│ 
│ 
├─feeds
│   
│   
│   
│   
│   
│   
│   
└─movies

Here are two module feeds and movies

Step 1: Write the entry file in the store folder:

import Vue from 'vue';
import Vuex from 'vuex';
import feeds from './feeds';
import movies from './movies';

(Vuex);

export default new ({
 modules: {
  feeds,
  movies
 },
});

Step 2: Assemble all parts in the index file within each module and output:

import state from './state';
import mutations from './mutations';
import actions from './actions';
import getters from './getters';

export default {
    namespaced: true, //One extra line    state,
    mutations,
    actions,
    getters
};

Pay attention to the extra line above. How do we distinguish different modules in the component? namespaced is written as true, which means that you can use this module name as a distinction (that is, the folder name where the module is located)

Step 3: Use in the component:

When using

Get state, use the mapping here:

import { mapState, mapMutations } from "vuex";

export default {
computed:{
  ...mapStated('Module name (necking level must be written clearly)',{ //For example 'movies/hotMovies    a:state=&gt;,
    b:state=&gt;
  })
},

Trigger actions:

import { mapActions } from 'vuex'
methods:{
  ...mapActions('Module name (necking level must be written clearly)',[ //For example 'movies/getHotMovies    'foo',
    'bar'
  ])
}

The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.