1***@qq.com
1***@qq.com
  • 发布:2023-04-23 17:06
  • 更新:2023-04-23 17:21
  • 阅读:455

uni-app中使用mapState编译报错

分类:uni-app
本人小菜,刚开始学uni-app,从网上弄了一段示例代码,就是编译不过去。  

./store/index.js:
import Vue from 'vue'
import Vuex from 'vuex'
import user from './modules/user.js'

Vue.use(Vuex)

const store = new Vuex.Store({
modules: {
user
}
})
export default store

main.js:

// #ifndef VUE3
import Vue from 'vue'
import App from './App'

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

import uView from 'uni_modules/uview-ui/index.js';
Vue.use(uView)

Vue.config.productionTip = false

App.mpType = 'app'

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

// #ifdef VUE3
import { createSSRApp } from 'vue'
import App from './App.vue'
export function createApp() {
const app = createSSRApp(App)
return {
app
}
}
// #endif

./store/user.js:
import { login } from 'api/user';
const STORAGE_KEY = 'user-info';
const TOKEN_KEY = 'token';
export default {
namespaced: true,
state:() => {
return {
// 用户 token
token: uni.getStorageSync(TOKEN_KEY) || '',
// 用户信息
userInfo: uni.getStorageSync(STORAGE_KEY) || {}
};
},
mutations: {
/**

  • 保存 token 到 vuex
    */
    setToken(state, token) {
    state.token = token;
    this.commit('user/saveToken');
    },
    /**
  • 保存 token 到 本地存储
    */
    saveToken(state) {
    uni.setStorage({
    key: TOKEN_KEY,
    data: state.token
    });
    },
    /**
  • 删除 token
    */
    removeToken(state) {
    state.token = '';
    this.commit('user/saveToken');
    },
    /**
  • 保存 用户信息 到 vuex
    */
    setUserInfo(state, userInfo) {
    state.userInfo = userInfo;
    this.commit('user/saveUserInfo');
    },
    /**
  • 保存 用户信息 到 本地存储
    */
    saveUserInfo(state) {
    uni.setStorage({
    key: STORAGE_KEY,
    data: state.userInfo
    });
    },
    /**
  • 删除用户信息
    */
    removeUserInfo(state) {
    state.userInfo = {};
    this.commit('user/saveUserInfo');
    }
    },
    actions: {
    /**
  • 完成登录
    */
    async login(context, userProfile) {
    console.log(userProfile);
    // 用户数据
    const rawData = userProfile.userInfo;
    // 调用登录接口
    const {
    data: res
    } = await login({
    signature: userProfile.signature,
    iv: userProfile.iv,
    nickName: rawData.nickName,
    gender: rawData.gender,
    city: rawData.city,
    province: rawData.province,
    avatarUrl: rawData.avatarUrl
    });
    // TODO: 登录逻辑
    console.log(res);
    this.commit('user/setToken', res.token);
    this.commit('user/setUserInfo', JSON.parse(userProfile.rawData));
    },
    /**
  • 退出登录
    */
    logout(context) {
    this.commit('user/removeToken');
    this.commit('user/removeUserInfo');
    }
    }
    }

my-login.vuew(script段):
import {
mapState,
mapActions
} from "vuex"
export default {
name: "my-login",
data() {
return {}
},
computed: {
mapState('user',['token','userInfo'])
},
methods: {
mapActions('user',['login','logout']),
/**

  • 获取用户信息
    */
    getUserInfo() {
    // 展示加载框
    uni.showLoading({
    title: '加载中'
    });
    uni.getUserProfile({
    desc: '登录后可同步数据',
    success: async (obj) => {
    // 调用 action ,请求登录接口
    await this.login(obj);
    },
    fail: () => {
    uni.showToast({
    title: '授权已取消',
    icon: 'error',
    mask: true
    });
    },
    complete: () => {
    // 隐藏loading
    uni.hideLoading();
    }
    });
    },
    /**
  • 退出登录
    */
    onLogoutClick() {
    uni.showModal({
    title: '提示',
    content: '退出登录将无法同步数据哦~',
    success: ({
    confirm,
    cancel
    }) => {
    if (confirm) {
    this.logout();
    }
    }
    });
    },
    }
    }

网上搜了两天,各种安装,修改,还是报错,报下面这个错:
16:48:52.685 Module build failed (from ./node_modules/babel-loader/lib/index.js):
16:48:52.686 语法错误: D:\HBuilderProjects\mall\components\my-login\my-login.vue: Unexpected token (29:11)
16:48:52.696 27 | },
16:48:52.697 28 | computed: {
16:48:52.701 > 29 | mapState('user',['token','userInfo'])
16:48:52.702 | ^
16:48:52.705 30 | },
16:48:52.706 31 | methods: {
16:48:52.708 32 | mapActions('user',['login','logout']),
16:48:52.708 at components\my-login\my-login.vue:29

试过把mapState和mapAction删除就可以通过,为啥?求大佬解答

2023-04-23 17:06 负责人:无 分享
已邀请:
YUANRJ

YUANRJ

参数有问题 mapState('user',['token','userInfo']),具体用法可参考 文档

  • 1***@qq.com (作者)

    mapState搞定了,轮到mapActions了,这玩意咋这么难用,没规律

    2023-04-24 10:58

该问题目前已经被锁定, 无法添加新回复