uni-app 配置Vuex Store

太过爱你忘了你带给我的痛 2023-02-12 05:44 2阅读 0赞

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

1.  安装 `vuex`
    
        npm install vuex
2.  在项目目录下新建Store/index.js  
    ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NKMTU1MQ_size_16_color_FFFFFF_t_70][]
3.  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
4.  在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()
5.  页面间数据共享
    
     *  获取store中的数据
    
        // 在页面1中获取 store 中的data
        let data1 = this.$store.state.data1;
    
     *  更新store中的数据
    
        // 在页面2中更新 store 中的data
        this.$store.commit("updateData", {  data1: "hello", data2: [1,2] })

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NKMTU1MQ_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200524182947564.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NKMTU1MQ==,size_16,color_FFFFFF,t_70