如何在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题库】小程序查看

相关文章
|
7月前
|
JavaScript Android开发 Swift
uni-app-x
uni-app-x
213 0
|
小程序
小程序-uni-app:hbuildx uni-app 安装 uni-icons 及使用
小程序-uni-app:hbuildx uni-app 安装 uni-icons 及使用
372 0
|
7月前
|
开发框架 JavaScript 小程序
vue,小程序,uni-app的生命周期?
vue,小程序,uni-app的生命周期?
|
2月前
|
开发框架 移动开发 前端开发
uni-app基础
【10月更文挑战第3天】
|
2月前
|
存储 前端开发 JavaScript
uni-app:基础组件 (上)
本文介绍了uni-app中多个组件的使用方法,包括存储操作、图标展示、按钮样式、表单输入、导航跳转和输入框控制等。通过具体代码示例展示了如何设置存储键值、使用不同类型的按钮、实现表单提交与重置功能、控制输入框的显示与清除等功能。
|
5月前
|
存储 小程序 安全
|
7月前
|
JavaScript 前端开发 Android开发
Vue和uni-app的区别
Vue和uni-app的区别
137 0
|
开发框架 移动开发 JavaScript
初识uni-app
uni-app是由DCloud公司研发的一款基于Vue.js的开源跨平台应用开发框架。使用uni-app,开发者只需编写一次代码,就可以同时构建出iOS、Android、H5、小程序(微信/支付宝/百度/字节跳动/快手)等多个平台的应用。uni-app是一款强大的跨平台开发框架,适用于多种场景。通过本文的介绍,希望您对uni-app有了初步的了解,并能够开始尝试使用uni-app开发您的项目。更多关于uni-app的详细信息,请访问官方文档。希望大家多多交流!共同进步。
149 0
|
开发框架 JavaScript Android开发
什么是uni-app
什么是uni-app
|
数据格式
uni-app 两个页面传值
1 可以使用路由传参的方式来打开页面并传递数据。 2 可以通过 uni-app中的全局变量来传递值。

热门文章

最新文章