我要评论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>
运行结果
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持代码网。
发表评论