如何在uni-app中使用vuex

简介: 如何在uni-app中使用vuex

在uni-app中内置了vuex,我们只需要引用就行了

首先在根目录下创建store目录在里面创建index.js;

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
  state: {
    hasLogin: false,
    userInfo: {}
  },
  mutations: {
    login(state, provider) {
      state.hasLogin = true;
      state.userInfo = provider;
      uni.setStorage({ //缓存用户登陆状态
        key: 'userInfo',
        data: provider
      })
    },
    logout(state) {
      state.hasLogin = false;
      state.userInfo = {};
      uni.removeStorage({
        key: 'userInfo'
      })
    }
  },
  actions: {
  }
})
export default store

然后在main.js中引用挂载

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()

在页面中使用

在script中引入

import {mapState,mapMutations} from 'vuex';

然后mapState必须写在 computed中

<view>{{position}}</view>//使用vuex中的值
export default {
    data() {
      return {
        address: "",
      }
    },
    computed: mapState(['position', 'userData'])
  }

mapMutations写在methods里面

methods: {
      ...mapMutations(['getPosition', 'getUserData'])
    },
//使用的话直接调用this.getPosition就可以了

收集的前端面试题 1000+ 扫码查看,以后面试可以用上

WX搜索 【MST题库】小程序查看

相关文章
|
XML 开发工具 Android开发
Repo工作原理及常用命令总结——2023.07(上)
Repo工作原理及常用命令总结——2023.07(上)
2116 0
|
并行计算 数据处理 Python
Python并发编程迷雾:IO密集型为何偏爱异步?CPU密集型又该如何应对?
在Python的并发编程世界中,没有万能的解决方案,只有最适合特定场景的方法。希望本文能够为你拨开迷雾,找到那条通往高效并发编程的光明大道。
253 2
|
11月前
|
安全 Java API
Spring Boot 3.x 在 2.x基础上有什么重大的改进?
Spring Boot 3.x于2022年11月发布,带来了诸多重大更新。主要改进包括:最低要求Java 17,整合Jakarta EE 9,优化实例化和配置支持,基于Spring Framework 6.x,引入AOT编译,增强GraalVM原生映像支持,改进日志管理和集成测试,提供更详细的Actuator监控功能,以及对Spring Cloud的兼容性更新。这些变化为现代云原生应用开发提供了更强支持。
913 36
|
JavaScript 前端开发
vue动态添加style样式
vue动态添加style样式
759 62
|
存储 JavaScript 前端开发
uni-app 从vue3项目创建到Pinia管理数据全局使用 持久化存储数据 详细教程
uni-app 从vue3项目创建到Pinia管理数据全局使用 持久化存储数据 详细教程
|
存储
【 uniapp - 黑马优购 | 搜索框 】如何实现自定义搜索组件、搜索建议、搜索历史
【 uniapp - 黑马优购 | 搜索框 】如何实现自定义搜索组件、搜索建议、搜索历史
1335 0
|
Shell Go
通过安装GVM 安装GO 操作步骤
通过安装GVM 安装GO 操作步骤
547 0
|
人工智能
AI一键换衣,阿里Outfit Anyone来了,电商人的福音!
【2月更文挑战第18天】AI一键换衣,阿里Outfit Anyone来了,电商人的福音!
2353 2
AI一键换衣,阿里Outfit Anyone来了,电商人的福音!
|
前端开发 容器
css溢出隐藏的五种方法
css溢出隐藏的五种方法