如何在uni-app使用vuex

梦里梦外; 2022-09-02 04:11 152阅读 0赞

由于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 ####

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

转载于[https://www.jianshu.com/p/c288b8e6067c][https_www.jianshu.com_p_c288b8e6067c]

[https_www.jianshu.com_p_b4d8a08f596e]: https://www.jianshu.com/p/b4d8a08f596e
[https_www.jianshu.com_p_c288b8e6067c]: https://www.jianshu.com/p/c288b8e6067c