如何在uni-app使用vuex

由于uni-app已经内置了vuex，所以只要正确引入就好了。

1、在项目的根目录下，创建一个名为store的文件夹然后在该文件夹下创建一个index.js的js文件

2、在该js文件下定义公共的数据以及方法函数，并且把它导出

import api from "../../http/api";
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
    state: {
    'hasLogin '：false,//是否登录
    userInfo:{},//用户信息
    networkState:true,//网络状态
    },
    mutations: {
    //监听网络状态变化
		changeWorksState(state){
			uni.getNetworkType({
			    success: function (res) {
			        if (res.networkType === "none") {
			        	//无连接
			        	state.networkState=false;
			        } else {
			        	state.networkState=true;
			        }
			    }
			});
		},		
    //存储登陆信息
    login(state, provider) {
			state.hasLogin = true;
			state.userInfo = provider;
			uni.setStorage({
				key:'userInfo',
				data:provider
			})
		},},
    actions: {
     //登录请求
    async logins({ commit }, { username, password }) {
      let res = await api.login({
        username,
        password,
      });
      //console.log(commit);
      if (res.data.status === 200) {
        //储存信息
        localStorage.setItem("adminToken", res.data.token);
        localStorage.setItem("adminUser", JSON.stringify(res.data));
        //跳转路由
        router.push("/");
        //提示用户
        // commit("setMenus", res.data);
        Message.success("登录成功");
      } else {
        Message.error(res.data.msg);
      }
    },}
})
export default store

3、在入口文件即：main.js挂载vuex

import Vue from 'vue'
import App from './App'
//引入vuex
import store from './store'
//把vuex定义成全局组件
Vue.prototype.$store = store
Vue.config.productionTip = false

App.mpType = 'app'

const app = new Vue({
    ...App,
//挂载
    store
})
app.$mount()

4、在单页面里使用vuex

<script>
import {
		mapMutations,mapActions
	} from 'vuex'
    export default {
        methods: {
        // 获取vuex中同步和异步方法 方法一
		...mapMutations(['login']),
		updata2(){
			this.login(JSON.stringify("存储用户数据"))
			console.log(this.userInfo)
		},
		// 获取vuex中同步和异步方法 方法二
		//页面事件触发 updata
		updata1(){
			this.$store.commit('login', this.userInfo)
		},
		},
		 created () {
        //获取vuex中state的变量 方法二
            console.log(this.$store.state.'hasLogin ')
        },
		 computed: {
		 //获取vuex中state的变量 方法一
         ...userState(['userInfo']),
  },
    }
</script>

如何在uni-app将vuex模块化
https://www.jianshu.com/p/b4d8a08f596e

转载于https://www.jianshu.com/p/c288b8e6067c