uniapp中使用vuex

由于uni-app已经内置了vuex，所以只要正确引入就好了

1、在项目的根目录下，创建一个名为store的文件夹然后在该文件夹下创建一个index.js的js文件
2、在该js文件下定义公共的数据以及方法函数，并且把它导出

// 1、引入vuex
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

//2、定义公共的数据及方法
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(stae){
            state.login = false;
            state.token = '';
            state.userName = '';
            state.avatarUrl ='';
        }
    }
})
///3、导出
export default store

image.png

3、在入口文件即：main.js挂载vuex

// 引入store - index.js 供全局使用
import store from './store'
Vue.prototype.$store = store

4、在单页面里使用vuex：在index.vue中使用

onLoad() {
    console.log(this.$store)
},

image.png