在uniapp中使用Vuex的方法

在uniapp中使用Vuex并不像Vue一样需要安装什么的,uniapp中已经为我们内置了Vuex的使用环境,我们只需要建立相关文件并引入就OK了,下面上代码及uniapp的完整H5实例。 首先在根目录下创建store...

在uniapp中使用Vuex并不像Vue一样需要安装什么的,uniapp中已经为我们内置了Vuex的使用环境,我们只需要建立相关文件并引入就OK了,下面上代码及uniapp的完整H5实例。

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

attachments-2021-06-5ZBvN6vk60bec83d08376.png


在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'])
},


下面看一下uniappH5实例,大家可以点击zip下载:H52021dll.zip

例子中使用vuex记录底部导航的当前点击位置

attachments-2021-06-BFzARc6h60becde96613b.png



你可能感兴趣的文章

相关问题

0 条评论

请先 登录 后评论
admin
admin

651 篇文章

作家榜 »

  1. admin 651 文章
  2. 粪斗 185 文章
  3. 王凯 92 文章
  4. 廖雪 78 文章
  5. 牟雪峰 12 文章
  6. 李沁雪 9 文章
  7. 全易 2 文章
  8. Stevengring 0 文章