uniapp+uView的vuex状态管理的使⽤⽅法；uView组件已经对vuex进⾏了封装，使⽤起来⾮常的⽅便快捷。
今晚快乐大本营嘉宾是谁store/index.js⽂件
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
let user = {};
try {
// 尝试获取本地是否存在user变量，第⼀次启动APP时是不存在的
user = StorageSync('user');
} catch (e) {
}
// 需要永久存储，且下次APP启动需要取出的，在state中的变量名
let saveStateKeys = ['login', 'user', 'token', 'location', 'cart', 'checkout'];
// 保存变量到本地存储中
const saveuser = function(key, value) {
switch(key) {
case 'cart':
uni.setTabBarBadge({
index: 2,
text: value.String() || ''
})
default:
}
// 判断变量名是否在需要存储的数组中
if (saveStateKeys.indexOf(key) != -1) {
// 获取本地存储的user对象，将变量添加到对象中
let tmp = StorageSync('user');
// 第⼀次打开APP，不存在user变量，故放⼀个{}空对象
tmp = tmp ? tmp : {};
tmp[key] = value;
// 执⾏这⼀步后，所有需要存储的变量，都挂载在本地的user对象中
uni.setStorageSync('user', tmp);
}
}
const store = new Vuex.Store({
state: {
token: ken ? ken : '',
login: user.login ? user.login : false,
user: user.user ? user.user : {},
cart: user.cart ? user.cart : {},
checkout: user.checkout ? user.checkout : {},
location: user.location ? user.location : { cityId: 110 },
},
mutations: {
$uStore(state, payload) {
// 判断是否多层级调⽤，state中为对象存在的情况，诸如user.info.score = 1
let nameArr = payload.name.split('.');
let saveKey = '';
let len = nameArr.length;
if (len >= 2) {
let obj = state[nameArr[0]];
吴川飘for (let i = 1; i < len - 1; i++) {
obj = obj[nameArr[i]];
}
obj[nameArr[len - 1]] = payload.value;
saveKey = nameArr[0];
} else {
// 单层级变量，在state就是⼀个普通变量的情况
state[payload.name] = payload.value;
saveKey = payload.name;
}
// 保存变量到本地，见顶部函数定义
saveuser(saveKey, state[saveKey])
}
}
})
export default store
百度十大神器store/$u.mixin.js⽂件
import { mapState } from 'vuex'
一生一世美人骨怎么剃的骨import store from "@/store"
// 尝试将⽤户在根⽬录中的store/index.js的vuex的state变量，全部加载到全局变量中
let $uStoreKey = [];
我爱他 歌词try{
$uStoreKey = store.state ? Object.keys(store.state) : [];
}catch(e){
}
beforeCreate() {
// 将vuex⽅法挂在到$u中
// 使⽤⽅法为：如果要修改vuex的state中的user.name变量为"史诗" => this.$u.vuex('user.name', '史诗') // 如果要修改vuex的state的version变量为1.0.1 => this.$u.vuex('version', '1.0.1')
this.$u.vuex = (name, value) => {
this.$storemit('$uStore', {
name,value
})
}
},
computed: {
// 将vuex的state中的所有变量，解构到全局混⼊的mixin中
...mapState($uStoreKey)
}
}
然后挂载到main.js
import Vue from 'vue';
import App from './App';
import tui from '@/common/tui';
import util from '@/utils/util';
Vue.prototype.tui = tui
Vue.prototype.util = util
Vue.prototype.$eventHub = Vue.prototype.$eventHub || new Vue()
App.mpType = 'app';
// 引⼊全局uView
import uView from 'uview-ui';
Vue.use(uView);
// 引⼊store
import store from '@/store';
// 引⼊uView提供的对vuex的简写法⽂件
let vuexStore = require('@/store/$u.mixin.js');
Vue.mixin(vuexStore);
// 引⼊uView对⼩程序分享的mixin封装
let mpShare = require('uview-ui/libs/mixin/mpShare.js');
fn键不能用Vue.mixin(mpShare);
const app = new Vue({
store,
...App
});
// http，将此部分放在new Vue()和app.$mount()之间，才能App.vue中正常使⽤
import httpInterceptor from '@/common/http.interceptor.js';
Vue.use(httpInterceptor, app);
// http接⼝API抽离，免于写url或者⼀些固定的参数
import httpApi from '@/common/http.api.js';
Vue.use(httpApi, app);
app.$mount();
然后：
在每个需要使⽤vuex管理状态的页⾯引⼊ vuex
import {mapState} from 'vuex';
computed: {
...mapState(['location', 'checkout']), //展开storage⾥的数据属性},
storage数据的存储
存⼊storage数据的⽅法：
//存⼊对象
this.$u.vuex('checkout', res.data);
this.$u.vuex('cart', res.data);
//存⼊单个属性
this.$u.vuex('token', ken);
this.$u.vuex('login', true);
获取storage数据的⽅法：
this.cityId=this.location.cityId;
this.current = ds[index];
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论