uniapp使用vuex定义全局变量
uniapp使用vuex定义全局变量首先,uniapp已经封装vuex,不需要在install使用1、首先在目录文件下创建store文件,在创建index.js2、在index中代码import Vue from 'vue'import Vuex from 'vuex'//导入本地存储jsimport storage from '@/common/storage.js'Vue.use(Vuex)c
·
安装
首先,uniapp已经封装vuex,不需要在install
使用
1、首先在目录文件下创建store文件,在创建index.js
2、在index中代码
import Vue from 'vue'
import Vuex from 'vuex'
//导入本地存储js
import storage from '@/common/storage.js'
Vue.use(Vuex)
const store = new Vuex.Store({
state: {
shopCartNum:10, //购物车数量
systemMsgNum:5, //系统消息数量
serviceMsgNum:10, //服务消息数量
userInfo:{},
},
mutations: {
//setModel是自定义的一个方法
//参数:第一个是state,第二个是自定义的参数
saveSysMsgNum(state,num){
state.systemMsgNum= num
},
//获取及其赋值购物车商品数量
changeShopCartNum(state,object){
//判断是否登录
const token = storage.fun.get(storage.keys.userToken)
//object为实例化对象 用于请求数据
if(token){
//用于请求后端数据、修改购物车数量的值(在需要的地方调动)
object.getShopCartCount().then(res=>{
if(res.status==10000){
state.shopCartNum = res.data
}else{
state.shopCartNum = 0
}
})
}else{
state.shopCartNum = 0
}
},
},
actions: {}
})
export default store
3、在main.js中引入store并全局配置使用
//引入
import store from './store'
//定义成全局组件
Vue.prototype.$store = store
const app = new Vue({
...App,
//挂载
store
})
4、其他组件使用
(1)、如果想直接在js中获取数据或者存储数据
methods :{
setSystemMsgNum(num){
//直接赋值,可能存在问题
//this.$store.state.systemMsgNum = num
//通过方法赋值
//this.$store.commit('定义的方法名',需要保存的值)
this.$store.commit('saveSysMsgNum',num);//存
},
getSystemMsgNum(){
this.num = this.$store.state.systemMsgNum
}
}
(2)、如果想直接在页面展示,则可以通过vuex的mapGetters 辅助展示
<template>
<view class="home u-skeleton">
{{systemMsgNum }}
</view>
</template>
<script>
//引入mapGetters
import {mapGetters} from 'vuex'
export default {
data(){
return {
}
},
//通过计算属性获取值
computed: {
...mapGetters(['shopCartNum', 'systemMsgNum', 'serviceMsgNum'])
},
}
</script>
更多推荐
已为社区贡献2条内容
所有评论(0)