目录项目效果 前言 一、安装 二、测试运行 三、全局配置1. globalProperties形式: 2. provide / inject 形式: ❀简单封装四、循环输出五、动态更新获取项目Demo
顺晟科技
2021-06-16 09:08:20
303
在uniapp中使用Vuex并不像Vue一样需要安装什么的,uniapp中已经为我们内置了Vuex的使用环境,我们只需要建立相关文件并引入就OK了,下面上代码及uniapp的完整H5实例。
首先在根目录下创建store目录在里面创建index.js;
在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记录底部导航的当前点击位置
09
2022-11
21
2022-10
30
2022-09
26
2022-09
23
2022-09
16
2022-09