Uni-app Vuex store的使用

「这是我参与2022首次更文挑战的第21天，活动详情查看：2022首次更文挑战」

创建store文件

state 定义属性，

getter 计算属性方法，

mutations 改变state数据的方法

actions 异步执行改变数据的方法

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

const store = new Vuex.Store({
	state: {
		token: '',
		userInfo: {},
	},
	getters: {
		hasLogin(state){
			return !!state.token;
		}
	},
	mutations: {
		//更新state数据
		setStateAttr(state, param){
			if(param instanceof Array){
				for(let item of param){
					state[item.key] = item.val;
				}
			}else{
				state[param.key] = param.val;
			}
		},
		//更新token
		setToken(state, data){
			const {token, tokenExpired} = data;
			state.token = token;
			uni.setStorageSync('uniIdToken', token);
			uni.setStorageSync('tokenExpired', tokenExpired);
			this.dispatch('getUserInfo'); //更新用户信息
		},
		//退出登录
		logout(state){
			state.token = '';
			uni.removeStorageSync('uniIdToken');
			setTimeout(()=>{
				state.userInfo = {};
			}, 1100)
		},
	},
	actions: {
		//更新用户信息
		async getUserInfo({state, commit}){

			//TODO getUserInfo
			const userInfo = {
				userName: 'username',
				nickName: 'nickName',
			}
			commit('setStateAttr', {
				key: 'userInfo',
				val: userInfo
			})
		},
	}
});

export default store;

Main.js中引入store

import store from './store/index.js'

Vue.prototype.$store = store

使用state

创建user.vue页面

映射属性userInfo

映射方法 hasLogin

<script>  
	import {mapState, mapGetters} from 'vuex'
    export default {
		mixins: [], 
		data(){
			return {
				historyList: [],
				orderCount: {
					c0: 0,
					c1: 1,
					c2: 2,
					c3: 3,
				}
			}
		},
		computed: {
			...mapState(['userInfo']),
			...mapGetters(['hasLogin']),
		},
		onShow(){
			this.$store.dispatch('getUserInfo');
		},
        methods: {
			navTo(url){
				console.log('navTo',url)
				uni.navigateTo({
					url
				})
			}
        }  
    }  
</script> 

页面中使用

<view>
  <view class="top">
			<image class="u-bg" src="/static/bg/user.jpg"></image>
			<view class="user-wrapper">
				<image class="avatar" :src="userInfo.avatar || '/static/icon/default-avatar.png'"></image>
				<view class="cen column" v-if="hasLogin">
					<text class="username f-m">{{ userInfo.nickname || userInfo.username || '' }}</text>
					<text class="user-group">普通会员</text>
				</view>
				<view class="login-box" v-else @click="navTo('/pages/login/login')">
					<text>请登录</text>
				</view>
			</view>
			<image class="arc-line" src="/static/icon/arc.png" mode="aspectFill"></image>
		</view>
		
		<view class="money-wrap">
			<view class="item center" hover-class="hover-gray" :hover-stay-time="50" @click="navTo('/pages/wallet/index', {login: true})">
				<text class="num">{{ userInfo.money || 0 }}</text>
				<text>活动</text>
			</view>
			<!--  hover-class="hover-gray" :hover-stay-time="50" -->
			<view class="item center">
				<text class="num">{{ userInfo.score || 0 }}</text>
				<text>积分</text>
			</view>
		</view>
</view>

实现列表项

uni-list实现列表 uni-list-item列表项

<uni-list class="center-list" >
			<uni-list-item  title="设置" link rightText="item.rightText" :key="1"
				:clickable="true" to="url" :show-extra-icon="true"
				:extraIcon="{type:'info',color:'#999'}">
				<template v-slot:footer>
					<view class="item-footer">
						<text class="item-footer-text">go</text>
						<view class="item-footer-badge"></view>
					</view>
				</template>
			</uni-list-item>
			<uni-list-item  title="关于" link rightText="item.rightText" :key="2"
				:clickable="true" to="url" :show-extra-icon="true"
				:extraIcon="{type:'info',color:'#999'}">
				<template v-slot:footer>
					<view class="item-footer">
						<text class="item-footer-text">go</text>
						<view class="item-footer-badge"></view>
					</view>
				</template>
			</uni-list-item>
			<uni-list-item  title="帮助" link rightText="item.rightText" :key="3"
				:clickable="true" to="url" :show-extra-icon="true"
				:extraIcon="{type:'help',color:'#999'}">
				<template v-slot:footer>
					<view class="item-footer">
						<text class="item-footer-text">go</text>
						<view class="item-footer-badge"></view>
					</view>
				</template>
			</uni-list-item>
		</uni-list>

改变属性方法

this.$store.commit('setToken','tokenValue');

// 通过action改变属性
this.$store.dispatch('getUserInfo');

Vuex store的基本用法示例完成。