uniApp 使用vuex

Myth丶恋晨 2023-09-23 14:21 136阅读 0赞

1、根目录创建store目录，创建index.js文件；

import Vue from 'vue'
    import Vuex from 'vuex'
    
    Vue.use(Vuex);
    
    
    export default new Vuex.Store({
        state: {
            hasLogin: false, // 登录状态
            userInfo: {}, // 用户信息
        },
        mutations: {
            setHasLogin(state, value){
                state.hasLogin = value
                console.log(state.hasLogin)
            }
        },
        actions: {},
        getters: {}
    })

2、在mian.js 中挂载store

import Vue from 'vue'
    import App from './App'
    import store from './store'  
    
    Vue.config.productionTip = false
    Vue.prototype.$store = store
    
    App.mpType = 'app'
    
    const app = new Vue({
        ...App,
        store,
    })
    app.$mount()

3、uniapp中使用vuex

3.1 获取state中的值

this.$store.state.loginStatus

3.2 修改state中的值

这里需要在mutations中定义修改的方法，如上setHasLogin

this.$store.commit('setHasLogin', true);

3.3 调用actions中的方法

这里需要在actions中定义方法

this.$store.dispatch('',{number:123})

3.4 调用getters中的方法

这里需要在getters中定义方法

this.$store.getters.reverseLoginStatus

4、状态方法监控

//页面内导入vuex的mapState跟mapMutations方法
    import { mapState, mapMutations } from 'vuex'
    computed: {
      ...mapState(['hasLogin'])
    }
    methods: {
      ...mapMutations(['setHasLogin']),
    }

发表评论取消回复

表情：

评论列表（有 0 条评论，136人围观）

还没有评论，来说两句吧...

相关阅读

相关 UNIAPP实战项目笔记31 使用Vuex状态机管理购物车状态

UNIAPP实战项目笔记31 使用Vuex状态机管理购物车状态核心代码 main.js 中添加引入状态机并挂载 import App from '

青旅半醒/ 2024年04月01日 12:27/ 0 赞/ 77 阅读

相关 uniApp 使用vuex

1、根目录创建store目录，创建index.js文件； import Vue from 'vue' import Vuex from 'vuex'

Myth丶恋晨/ 2023年09月23日 14:21/ 0 赞/ 137 阅读

相关 uniapp的Vuex使用

uniapp的Vuex使用一、在项目的根目录下新建一个store文件夹，然后在文件夹下新建一个index.js文件 ![在这里插入图片描述][watermark_t

阳光穿透心脏的1/2处/ 2023年07月21日 11:13/ 0 赞/ 12 阅读

相关 vuex使用

// 记录和显示错误 function errorLog(error) { if (util.cookies.get('block

悠悠/ 2023年01月18日 12:25/ 0 赞/ 185 阅读

相关 uniapp Vuex 状态管理模式基本使用

一、uniapp 引入定义挂载Vuex 1、在根目录下建立store目录创建index.js文件 ![创建store目录][store] 代码如下 i

绝地灬酷狼/ 2022年12月12日 13:44/ 0 赞/ 431 阅读

相关 uniapp、vue中直接调用vuex的子模块

uniapp、vue中直接调用vuex的子模块 / 适合App.vue里面app一启动就调用该方法 @method commit @param {子模块的名

淡淡的烟草味﹌/ 2022年10月23日 08:17/ 0 赞/ 153 阅读

相关 nuxt使用vuex

> 先简单的使用一下vuex，也是初学，在这里写下笔记，帮助有缘人 > > nuxt已经继承了vuex，我们无需安装。第一步：在store文件夹下面创建inde

￡神魔★判官ぃ/ 2021年12月14日 02:07/ 0 赞/ 521 阅读

相关 mpvue - 使用vuex

前提：在mpvue安装了vuex 使用： 1）创建store/index.js import Vue from 'vue' impor

小咪咪/ 2021年09月20日 13:38/ 0 赞/ 407 阅读

相关 vuex使用

1. vuex简介 vuex是专门用来管理vue.js应用程序中状态的一个插件。他的作用是将应用中的所有状态都放在一起，集中式来管理。需要声明的是，这里所说的状态指的是v

末蓝、/ 2021年09月03日 10:54/ 0 赞/ 439 阅读

相关 uniapp中使用GlobalData和Vuex

效果图： ![20210307001752757.gif][] 实现代码： <template> <view> globalData

灰太狼/ 2021年07月26日 02:19/ 0 赞/ 1048 阅读