为何要做小程序流程_vuex的module模块用法示例

2021-01-08 11:32 jianzhan
vuex的module模块用法示例       这篇文章主要介绍了vuex的module模块用法示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

想尝试使用vuex的module来进行操作,看了一些资料,我简单进行了一个简化

目录结构:

store
│ index.js
├─feeds
│ actions.js
│ getters.js
│ index.js
│ mutation-type.js
│ mutations.js
│ state.js
└─movies
 actions.js
 getters.js
 index.js
 mutation-type.js
 mutations.js
 state.js

这里是两个模块feeds和movies

第一步:在store文件夹下的index.js入口文件写入:

import Vue from 'vue';
import Vuex from 'vuex';
import feeds from './feeds';
import movies from './movies';
Vue.use(Vuex);
export default new Vuex.Store({
 modules: {
 feeds,
 movies

第二步:在每个模块内的index文件这组装所有的零件,并且输出:

import state from './state';
import mutations from './mutations';
import actions from './actions';
import getters from './getters';
export default {
 namespaced: true, //多出的一行
 state,
 mutations,
 actions,
 getters

注意上面多出的一行,我们在组件里怎么区分不同模块呢?namespaced写成true,意思就是可以用这个module名作为区分了(也就是module所在的文件夹名)

第三步:在组件里使用:

使用的时候

获取state,这里使用映射:

import { mapState, mapMutations } from "vuex";
export default {
computed:{
 ...mapStated('模块名(嵌套层级要写清楚)',{ //比如'movies/hotMovies
 a:state= state.a,
 b:state= state.b

触发actions操作:

import { mapActions } from 'vuex'
methods:{
 ...mapActions('模块名(嵌套层级要写清楚)',[ //比如'movies/getHotMovies
 'foo',
 'bar'

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持凡科。