uni使用vuex及缓存

1 store 目录新建 index.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
   state: {
       
       hasLogin: false,
       deviceId : '',
       userId:'',
       account:'',
       password:'',
       userName: '测试',
       userPhone:'18645827333',
       userAddress:'黑龙江',
       avatarUrl :'https://img-cdn-qiniu.dcloud.net.cn/new-page/hx.png',
       
   },
   mutations: {
       setDeviceId(state,provider){
           console.log(provider);
           console.log(state);
           state.deviceId=provider;
       },
       setUserData(state,provider){
           console.log("setUserData is runing!");
           console.log(provider);
           console.log(provider.userName);
           console.log(provider.userPhone);
           console.log(provider.userAddress);
           state.userId=provider.userId;
           state.userName=provider.userName;
           state.userPhone=provider.userPhone;
           state.userAddress=provider.userAddress;
           state.avatarUrl =provider.avatarUrl ;
           state.hasLogin=true;
       },
       logout(state) {  
           state.deviceId='';
           state.userName='未登陆,请登陆';
           state.userPhone='';
           state.userAddress='';
           state.hasLogin=false;
           
       }  
   }
})

export default store`

2 main.js 挂载 Vuex

import Vue from 'vue'
import App from './App'
import store from './store'

Vue.config.productionTip = false

Vue.prototype.$store = store

App.mpType = 'app'

const app = new Vue({
    store,
    ...App
})
app.$mount()

3 使用已login为例

<template>
    <div>
        <div class="login_box">     
           <div class="login_panel">
             <div class="login_title">
               <img src="../../../static/img/login/logo.png" alt="">
               <p>输入账号进行安全登录</p>
             </div> 
              <label style="margin-top: 50px">账号：</label>
                    <input class="uni-input" v-model="my_account" />
                <label>密码：</label>                          
                   <input class="uni-input" v-model="my_password"   />
              <button class="bt" type="primary" @click="login">登录</button>
              <div>
                  {{deviceId}}
              </div>
           </div>
        </div>
        <div>
        </div>
    </div>
     
</template>

<script>
    //导入常量
    import { LOGIN_API, KEY_VUE_DEVICE_ID} from "../../../constant"
       //引入生成随机数
    import UUID from 'uuid-js'
      //导入vuex
    import { 
        mapState,
        mapMutations,
        mapGetters
    } from 'vuex';
    export default {
        data() {
            return {
                my_account:'user',
                my_password:'123'
            }
        },
        computed:{
                       //使用vuex中的state
            ...mapState(["deviceId","account","password"])
        },
        methods: {
                    //使用vuex中的mutations
            ...mapMutations(["setDeviceId",'setUserData']),
            
            login(){
                let myDeviceId=this.my_setDeviceId();               
                console.log('account '+this.my_account); //用户名
                console.log('password '+this.my_password); //密码
                console.log('vueDeviceId '+myDeviceId); //设备码
                //that=this;
                uni.request({
                    url: LOGIN_API,
                    method: 'POST',
                    data: {
                        account:this.my_account,
                        password:this.my_password,
                        device:myDeviceId                       
                    },
                    success: res => {
                        console.log(res.data);
                        if(res.data.status==0){
                            let userData=[];
                            userData.userId=res.data.data.id;
                            userData.userName=res.data.data.name;
                            userData.userPhone=res.data.data.phone;
                            userData.userAddress=res.data.data.address;
                            userData.avatarUrl =res.data.data.version;
                            this.setUserData(userData);
                            uni.showModal({
                                
                                content: '登录成功',
                                success: function (res) {
                                    if (res.confirm) {
                                        console.log('用户点击确定');
                            
                                        uni.switchTab({
                                            url: '/pages/main'
                                        });
                                    } else if (res.cancel) {
                                        console.log('用户点击取消');
                                    }
                                }
                            });
                        }else{
                            uni.showToast({
                                title:res.data.msg,
                                icon: 'none',
                            })
                        }
                    },
                    fail: () => {},
                    complete: () => {}
                });
                
            },
            //设置设备随机码
            my_setDeviceId(){
                console.log(this.deviceId);
                let vueDeviceId = uni.getStorageSync(KEY_VUE_DEVICE_ID); 
                if(vueDeviceId == ""){
                     console.log("加载失败！");
                     vueDeviceId = UUID.create().toString();
                     console.log('generate device id '+vueDeviceId);
                    
                    this.setDeviceId(vueDeviceId);
                    uni.setStorageSync(KEY_VUE_DEVICE_ID, vueDeviceId);
                }else{
                     console.log("加载成功");
                     this.setDeviceId(vueDeviceId);
                      console.log('generate device id '+vueDeviceId);
                }
                 
                return vueDeviceId;
            }
        },
        onLoad() {
             //uni.setStorageSync(KEY_VUE_DEVICE_ID, '');
             //uni.removeStorageSync(KEY_VUE_DEVICE_ID);
        }
    }
</script>

<style scoped>

</style>

说明：屡屡思路
先在缓存中判断有没有随机数 然后请求后端 得到的数据 都存储到vuex 中