uni-app（VUE）中使用模块化使用VUEX

第一步创建对应的文件如下图：（uni-app自带了vuex 无需下载）

 index.js代码：可直接复制使用

import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex)

// 把modules文件下的 js文件返回出来
// https://webpack.js.org/guides/dependency-management/#requirecontext
const modulesFiles = require.context('./modules', true, /\.js$/)

// you do not need `import app from './modules/app'`
// it will auto require all vuex module from modules file
const modules = modulesFiles.keys().reduce((modules, modulePath) => {
  // set './app.js' => 'app'
  const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, '$1')
  const value = modulesFiles(modulePath)
  modules[moduleName] = value.default
  return modules
}, {})

const store = new Vuex.Store({
	modules
})

export default store

在main.js 文件中注册

import Vue from 'vue'
import App from './App'
import store from 'store/index.js'
Vue.prototype.$store = store

Vue.config.productionTip = false

App.mpType = 'app'

// 引入全局uView
import uView from 'uview-ui'
Vue.use(uView);

const app = new Vue({
    ...App,
	store
})
app.$mount()

 然后在模块化中创建文件home.js，vc.js

//home.js
export default{
		namespaced: true,//命名空间必须写
		state: {
			// 第一个页面参数
			pickerVal:'1111'
		},
		getters:{
			getState(state){
				return state;
			}
		},
			//唯一修改state值的方法 
			// commit
		mutations: {
			
		},
		// 异步的操作
			// dispatch
	  actions: {
			
		}
}

//vc.js

export default{
		namespaced: true,//命名空间必须写
		state: {
			// 第一个页面参数
			pickerValc:'22'
		},
		getters:{
			getState(state){
				return state;
			}
		},
			//唯一修改state值的方法 
			// commit
		mutations: {
			setPickerValc(state,data){
				state.pickerValc = data;
			}
		},
		// 异步的操作
			// dispatch
	  actions: {
			subAsy({commit},data){
	 			setTimeout(res =>{
	 				commit('pickerValc',data)
	 			},1000)
	 		}
		}
}

在页面中使用 

// 使用vc.js 函数
this.$store.commit('vc/setPickerValc',1112233)
console.log(this.$store.state.vc.pickerValc);
console.log(this.$store.getters['home/getState']);
//使用home.js 函数只是把vc 换成对应文件名



//其他方式使用
import {mapState,mapGetters,mapMutations,mapActions} from 'vuex';
//mapState,mapGetters 在 computed 中使用;
//mapMutations,mapActions 在 methods中使用;

computed:{
    ...mapState({'data':'data'}), //多文件使用方式 前面data变量 后面data页面
    ...mapState('global',{ // global是js文件名 userData是变量 user是global里面的变量
				userData:'user'
			})
    ...mapGetters(['getName','getAge'])
}

methods:{
    ...mapMutations(['setName','setAge']),
    ...mapActions(['funcSetName','funSetAge'])
}

Vuex的...mapstate和...mapmutations以及...mapActions的使用_Litt_White的博客-CSDN博客