uniapp中设置全局变量---vuex仓库
在一些情境下会应用到全局变量，接下来便来定义全局变量
会应用到vuex仓库，不了解的可以先看其基础语法，
-
创建仓库 在项目根目录下创建一个名为“store”的文件夹，文件夹里存放index .js文件和moudles文件夹，moudles文件夹中存放一个自定义名称的js 文件，这里我叫user.js 如图： 在index.js文件中写入以下代码
index.js文件
import Vue from vue
import Vuex from vuex
import user from @/store/modules/user.js
Vue.use(Vuex)
export default new Vuex.Store({
modules: {
user,
}
})
在user.js文件中写入需要的全局变量和方法 以isLoad全局变量为例
- 在state中定义变量
- 在Mutations中定义一个方法setIsLoad
- 在setIsLoad中传入参数state和isLoad 并 赋值
- this.State = isLoad
export default {
state: {
//定义的全局变量
token: null,
user: {
},
cid: null,
isLoad: false,
},
// 计算属性 可以获得参数,第一个是state,第二个是getters(自身) 用户传参(state,getters)=> (id)=>{}
getters: {
getUser: state => state.user,
getToken: state => state.token,
},
mutations: {
// 登录
setUser(state, userInfo) {
state.user = userInfo
uni.setStorageSync(user, userInfo)
},
setToken(state, token) {
state.token = token
uni.setStorageSync(token, token)
},
clearToken(state){
state.token =
uni.clearStorageSync(token)
},
initUser(state) {
const user = uni.getStorageSync(user)
const token = uni.getStorageSync(token)
if(user) {
state.user = JSON.parse(user)
}
if(token) {
state.token = token
}
},
setIsLoad(state, isLoad) {
state.isLoad = isLoad
}
},
actions: {
}
}
-
配置仓库 在main.js文件中配置如下
import Vue from vue
import App from ./App
//引入配置仓库
import store from ./store
import request from common/lib/request.js
import uView from uview-ui
Vue.config.productionTip = false
//引入配置仓库
Vue.prototype.$store = store
Vue.prototype.$http = request
// 保留当前页面，跳转到应用内的某个页面，使用uni.navigateBack可以返回到原页面。
Vue.prototype.navigateTo = (options) => {
uni.navigateTo(options)
}
// 跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面。
Vue.prototype.switchTab = (options) => {
uni.switchTab(options)
}
App.mpType = app
Vue.use(uView)
const app = new Vue({
store,
...App
})
app.$mount()
-
调用仓库 在调用页面导入所需内容
<script>
import {
mapState, mapMutations } from vuex;
</script>
2.如果是state中的全局变量（不更改数据） 在调用页面的computed中操作
...mapState({
token: state => state.user.token,
isLoad : state => state.user.isLoad
}),
3. 如果是Mutations中（需要更改数据） 在调用页面的methods中操作
...mapMutations([clearToken,setIsLoad]),
4. 在methods的方法中可以用this.clearToken进行调用
async login() {
const data = {
userName: this.userName,
password: this.password
};
const res = await this.$http.post(/user/login, data, {
token: false });
if (res.code !== 0) {
return this.showToast(res.msg);
}
if (res.data.token) {
this.setToken(res.data.token); //!!!!!!这里
this.loginShow = false;
uni.reLaunch({
url: ../index/index
});
}
},