uni-app的使用分享(四)使用vuex

你的名字 2022-04-22 19:28 233阅读 0赞

uni-app使用vuex对项目的组建状态进行管理非常方便，也可以进行全局变量使用。

如果不了解什莫是vuex的朋友大家可以先去[官网][Link 1]看看。

在 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 使用

在其他页面使用的时候用 取值，比如其中的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;