uni-app使用vuex对项目的组建状态进行管理非常方便,也可以进行全局变量使用。
如果不了解什莫是vuex的朋友大家可以先去官网看看。
在 uni-app 项目根目录下新建 store 目录,在 store 目录下创建 index.js 定义状态值。
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)”
const store = new Vuex.Store({
state: {
login: false,
token: '',
avatarUrl: '',
userName: ''
},
mutations: {
login(state, provider) {
console.log(state)
console.log(provider)
state.login = true;
state.token = provider.token;
state.userName = provider.userName;
state.avatarUrl = provider.avatarUrl;
},
logout(state) {
state.login = false;
state.token = '';
state.userName = '';
state.avatarUrl = '';
}
}
})
export default store
然后,需要在 main.js 挂载 Vuex
import store from './store'
Vue.prototype.$store = store
最后,在 pages/index/index.vue 使用
<script>
import {
mapState,
mapMutations
} from 'vuex';
export default {
computed: {
...mapState(['avatarUrl', 'login', 'userName'])
},
methods: {
...mapMutations(['logout'])
}
}
</script>
在其他页面使用的时候用 取值,比如其中的token,可以使用用‘this.$store.state.token’这样来取。
我在此项目中有个地方使用了vuex,就是购买时,会弹出购买规格,人数,营期。然后需要将营期id和价格,人数传值到确认订单页面进行付款。
先引入import store from '../../../../store/index.js'
let cart=[信息];
然后提交
this.$store.commit("addCart",cart);
在store的index.js的mutations中添加方法
addCart(state,data){
state.cart = data;
}
然后在确认订单页面获取cart的值,this.cart=this.$store.state.cart;
这样就可以使用了。