uniapp中使用vuex

创建store文件夹

在main.js中引入使用

在store文件夹中创建一个index.js文件，用于统一管理不同逻辑使用vuex

import homeStore from './home.js'
import carManager from './car-manager.js'
import storeStore from './storeList.js'
import vipCradStore from './vipCrad.js'
Vue.use(Vuex)
const store = new Vuex.Store({
	modules: {
		// then we reference it
		appStore,
		homeStore,
		carManager,
		// 门店信息
		storeStore,
		// 会员
		vipCradStore
	},
})

export default store

在平时的项目中不同的逻辑之间我们可能需要调用store中不同.js文件中的逻辑,继续刷新数据，比如在wxAppletPay中支付完成可以通过使用

直接调用index.js文件中modules中的vipCradStore中cradInfo这个函数

store.dispatch('homeStore/getOrderDetail', dataInfo);

import {Api} from '../api/api.js'
import store from './index.js';
import {
	hideLoading, //关闭加载中
	stopPullDownRefresh,
	showLoading,//开启加载中
	showToast,//软提示
	GetDistance,//计算KM
	hideLoadingTime, //关闭加载中并且提示
} from '../utils/orderCof.js'
const state = {
	pgType:[],
	myGold:[],
	discount:0
}
const mutations = {
	TYPEINFO: (state, data) => {
		state.pgType = data;
	},
	MYGOLDDETAILS: (state, data) => {
		uni.setStorageSync('myGold',data)
		state.myGold = data;
	},
	CRADINFO: (state,data) => {
		if(data != 0) {
			state.discount = data
		} else {
			state.discount = 0
		}
	}
}

const actions = {
	// 支付
	async wxAppletPay({
		commit
	},data) {
		showLoading()
		const [error,res] = await Api.wxAppletPay(data)
		let that = this
		if(res['data']['code'] == 0) {
			hideLoading();
						store.dispatch('homeStore/getOrderDetail',{
							...res['data']['resultData']
					}
	},
	// 获取积分
	async myGoldDetails({
		commit
	},data) {
		consloe.log(data)
	},
}

export default {
  namespaced: true,
  state,
  mutations,
  actions
}

在main.js中引入

import Vue from 'vue'
import App from './App'
//引入vuex
import store from './store/index.js' 
Vue.config.productionTip = false
App.mpType = 'app'
uni.onAppShow((res) => {
})
const app = new Vue({
//使用
store,
...App
})
app.$mount()

在vue文件中的使用vuex定义方法

可以直接调用在vipCradStore中定义的myGoldDetails方法

export default {
methods: {
// 获取金币和余额信息
my_gold_details() {
		this.$store.dispatch('vipCradStore/myGoldDetails'，{name：'hello word'})
},
}
}

在vue文件中的使用vuex获取数据

import {
		mapState
} from 'vuex';


export default {
computed: mapState({
			serverUrl: state => state.homeStore.serverUrl,
			ItemData: state => state.storeStore.ItemData
	}),
}