uni-app 配置Vuex Store

在uni-app中使用Vuex实现页面间的数据共享

1. 在项目目录下新建Store/index.js
   

2. Store/index.js

   import Vue from 'vue'
   import Vuex from 'vuex'
   
   Vue.use(Vuex)
   
   const store = new Vuex.Store({
   	// 全局数据
   	state:{
   		data1: null,
   		data2: []
   	},
   	// 修改state中的全局数据的唯一接口，mutations的函数只能是同步函数
   	mutations:{
   		updateData(state, _new){
   			this.state.data1 = _new.data1;
   			this.state.data2 = _new.data2;
   		}
   	},
   	// 修改state中的全局数据的间接接口，可以为异步函数，通过调用mutations中的函数实现对state的修改
   	actions: {
   	
   	}
   })
   
   export default store
   

3. 在main.js配置全局$store

   import Vue from 'vue'
   import App from './App'
   
   // 新增--1
   import store from './store'
   Vue.prototype.$store = store
   //
   
   Vue.config.productionTip = false
   
   
   App.mpType = 'app'
   
   const app = new Vue({
   	...App,
   	store	// 新增--2
   })
   app.$mount()
   

4. 页面间数据共享

   • 获取store中的数据

   // 在页面1中获取 store 中的data
   let data1 = this.$store.state.data1;
   

   • 更新store中的数据

   // 在页面2中更新 store 中的data
   this.$store.commit("updateData", { data1: "hello", data2: [1,2] })