在uniapp中使用Vuex的方法
在uniapp中使用Vuex并不像Vue一样需要安装什么的，uniapp中已经为我们内置了Vuex的使用环境，我们只需要建立相关文件并引入就OK了，下面上代码及uniapp的完整H5实例。
首先在根目录下创建store...
在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记录底部导航的当前点击位置
- 发表于 2021-06-08 09:54
- 阅读 ( 727 )
- 分类：web前端开发
