vuex的用法

本文详细介绍如何在Vue项目中使用Vuex进行状态管理,包括引入注册、创建实例对象及在组件中接收值的方法,适合初学者快速掌握Vuex基本用法。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

个人觉得vuex非常方便实用,可以保存各种公共的值和方法等,下面介绍下我个人关于vuex的基本用法
vue三步走:引入 注册 创建实例对象
//引入Vuex
import Vuex from "vuex"
//注册Vuex组件
Vue.use(Vuex)
//创建Vuex实例对象
var store = new Vuex.Store({
  state: {
    user:false,
    userphone:''
  },
  mutations: {
    userLogin(state,isLogin) {//这里面接收的是接口请求来的数据
      if(isLogin){
        state.user=true
        state.userphone=isLogin
      }
    }
  },
  getters: {
    a:function(state){
      return state.user    
    },
    b:function(state){
      return  state.userphone
    }
  }
})
//将vuex对象注册vue对象
new Vue({
  store
})
在组件的computed中接收值
    computed: {
            a() {
                return this.$store.state.user
            },
            b() {
                return this.$store.state.userphone
            }
        }
再到结构层调用就行
    <div v-if="a"></div>

这是我vue项目中页面状态保存判定的例子,在vuex中创建一个boolean值和一个空字符串,通过判定字符串中是否有登陆后接收的值来判定每个页面是否在登录状态,但这是简化后的代码样式,大家实用vuex传值和穿方法时注意代码格式就行

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值