目录项目效果 前言 一、安装 二、测试运行 三、全局配置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