vuex中的state

vuex中的state

简介

本文讲解vuex中的state使用方法。

入门讲解

首先第一步肯定是创建vue项目,具体操作看这篇文章:用命令窗口的方式创建Vue项目

首先在store文件夹下面,创建一个state.js文件,存放公共的数据
在这里插入图片描述

在store文件夹下面的index.js文件中进行如下配置。
在这里插入图片描述

然后前端可以采取这两种写法,就可以访问到存储的数据了。所以我们可以知道的是这个state.js就是用来存放数据的。
在这里插入图片描述
在这里插入图片描述

mapState 辅助函数

具体代码如下:
在这里插入图片描述

<template>
  <div class="about">
    <h1>This is an about page</h1>
    {{ $store.state.str }}
    <hr>
    {{ str }}
    <hr>
    {{ a }}
    <hr>
    {{ b }}
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  computed: {
    ...mapState(['str', 'a', 'b'])
  }
}
</script>

运行结果:
在这里插入图片描述

案例

好的,在不增加难度的情况下,我来给您修改一下之前的案例。

案例 1:在线状态

思路
const store = new Vuex.Store({
  state: {
    onlineStatus: false
  }
})

这里我们定义了一个名为 onlineStatus 的属性,并初始化为 false

当用户上线时,可以更新 onlineStatus 属性:

store.state.onlineStatus = true

这将直接更改 onlineStatus 属性中的值。

然后,你可以通过其他组件调用此值:

computed: {
  onlineStatus() {
    return this.$store.state.onlineStatus
  }
}
完整代码

项目结构
在这里插入图片描述

  • state.js
    在这里插入图片描述
export default {
  onlineStatus: false
}

  • index.js
    在这里插入图片描述
import { createStore } from 'vuex'
import state from './state'

export default createStore({
  state,
  mutations: {
    SET_ONLINE_STATUS (state, status) {
      state.onlineStatus = status
    }
  }
})

  • TestView.vue
    在这里插入图片描述
<template>
    <div>
      <p>Your online status is {{ onlineStatusText }}</p>
    </div>
  </template>

<script>
export default {
  computed: {
    onlineStatusText () {
      return this.$store.state.onlineStatus ? 'Online' : 'Offline'
    }
  }
}
</script>

  <style>
  /* 样式可以选择添加 */
  </style>

案例 2:主题样式

思路
const store = new Vuex.Store({
  state: {
    themeColor: 'blue'
  }
})

我们定义了一个名为 themeColor 的属性,并用 "blue" 初始化它。为了更改主题颜色,可以直接设置 themeColor 的值:

store.state.themeColor = 'red'

这将直接更改我们的主题颜色值。

然后,你可以通过其他组件调用此值:

computed: {
  themeColor() {
    return this.$store.state.themeColor
  }
}
完整代码
  • state.js
export default {
  onlineStatus: false,
  themeColor: 'blue'
}

  • index.js
import { createStore } from 'vuex'
import state from './state'

export default createStore({
  state,
  mutations: {
    SET_ONLINE_STATUS (state, status) {
      state.onlineStatus = status
    },
    SET_THEME_COLOR (state, color) {
      state.themeColor = color
    }
  }
})

  • TestView.vue
<template>
    <div :style="{ background: themeColor }">
      <p>Your theme color is {{ themeColor }}</p>
      <button @click="changeThemeColor">Change Theme Color</button>
    </div>
  </template>

<script>
export default {
  computed: {
    themeColor () {
      return this.$store.state.themeColor
    }
  },
  methods: {
    changeThemeColor () {
      this.$store.state.themeColor = 'red'
    }
  }
}
</script>

  <style>
  /* 样式可以自定义 */
  </style>

  • 运行结果
    在这里插入图片描述
    在这里插入图片描述
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

极客李华

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值