安装

首先，uniapp已经封装vuex,不需要在install

使用

1、首先在目录文件下创建store文件，在创建index.js

2、在store index.js的代码

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）、直接获取数据或者存储数据

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>

好了，这样用vuex进行变量和方法的存储就完成了