vuex中的state使用及说明

轮丨廓

vuex中的state

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

入门讲解

首先第一步肯定是创建vue项目，具体操作看这篇文章：用命令窗口的方式创建Vue项目
首先在store文件夹下面，创建一个state.js文件，存放公共的数据

在store文件夹下面的index.js文件中进行如下配置。

然后前端可以采取这两种写法，就可以访问到存储的数据了。
所以我们可以知道的是这个state.js就是用来存放数据的。

mapState辅助函数

具体代码如下：

1. <template>
   
2.   <div class="about">
   
3.     <h1>This is an about page</h1>
   
4.     {{ $store.state.str }}
   
5.     <hr>
   
6.     {{ str }}
   
7.     <hr>
   
8.     {{ a }}
   
9.     <hr>
   
10.     {{ b }}
    
11.   </div>
    
12. </template>
    
13. 
    
14. <script>
    
15. import { mapState } from 'vuex'
    
16. export default {
    
17.   computed: {
    
18.     ...mapState(['str', 'a', 'b'])
    
19.   }
    
20. }
    
21. </script>

复制代码

运行结果：

案例

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

案例 1：在线状态

• 思路
  

1. const store = new Vuex.Store({
   
2.   state: {
   
3.     onlineStatus: false
   
4.   }
   
5. })

复制代码

这里我们定义了一个名为

1. onlineStatus

复制代码

的属性，并初始化为

1. false

复制代码

。
当用户上线时，可以更新

1. onlineStatus

复制代码

属性：

1. store.state.onlineStatus = true

复制代码

这将直接更改

1. onlineStatus

复制代码

属性中的值。
然后，你可以通过其他组件调用此值:

1. computed: {
   
2.   onlineStatus() {
   
3.     return this.$store.state.onlineStatus
   
4.   }
   
5. }

复制代码

完整代码

• 项目结构
  

• state.js
  

1. export default {
   
2.   onlineStatus: false
   
3. }

复制代码

• index.js
  

1. import { createStore } from 'vuex'
   
2. import state from './state'
   
3. 
   
4. export default createStore({
   
5.   state,
   
6.   mutations: {
   
7.     SET_ONLINE_STATUS (state, status) {
   
8.       state.onlineStatus = status
   
9.     }
   
10.   }
    
11. })

复制代码

• TestView.vue
  

1. <template>
   
2.     <div>
   
3.       <p>Your online status is {{ onlineStatusText }}</p>
   
4.     </div>
   
5.   </template>
   
6. 
   
7. <script>
   
8. export default {
   
9.   computed: {
   
10.     onlineStatusText () {
    
11.       return this.$store.state.onlineStatus ? 'Online' : 'Offline'
    
12.     }
    
13.   }
    
14. }
    
15. </script>
    
16. 
    
17.   <style>
    
18.   /* 样式可以选择添加 */
    
19.   </style>

复制代码

案例 2：主题样式

• 思路
  

1. const store = new Vuex.Store({
   
2.   state: {
   
3.     themeColor: 'blue'
   
4.   }
   
5. })

复制代码

我们定义了一个名为

1. themeColor

复制代码

的属性，并用

1. "blue"

复制代码

初始化它。
为了更改主题颜色，可以直接设置

1. themeColor

复制代码

的值：

1. store.state.themeColor = 'red'

复制代码

这将直接更改我们的主题颜色值。
然后，你可以通过其他组件调用此值：

1. computed: {
   
2.   themeColor() {
   
3.     return this.$store.state.themeColor
   
4.   }
   
5. }

复制代码

完整代码

• state.js
  

1. export default {
   
2.   onlineStatus: false,
   
3.   themeColor: 'blue'
   
4. }

复制代码

• index.js
  

1. import { createStore } from 'vuex'
   
2. import state from './state'
   
3. 
   
4. export default createStore({
   
5.   state,
   
6.   mutations: {
   
7.     SET_ONLINE_STATUS (state, status) {
   
8.       state.onlineStatus = status
   
9.     },
   
10.     SET_THEME_COLOR (state, color) {
    
11.       state.themeColor = color
    
12.     }
    
13.   }
    
14. })

复制代码

• TestView.vue
  

1. <template>
   
2.     <div :style="{ background: themeColor }">
   
3.       <p>Your theme color is {{ themeColor }}</p>
   
4.       <button @click="changeThemeColor">Change Theme Color</button>
   
5.     </div>
   
6.   </template>
   
7. 
   
8. <script>
   
9. export default {
   
10.   computed: {
    
11.     themeColor () {
    
12.       return this.$store.state.themeColor
    
13.     }
    
14.   },
    
15.   methods: {
    
16.     changeThemeColor () {
    
17.       this.$store.state.themeColor = 'red'
    
18.     }
    
19.   }
    
20. }
    
21. </script>
    
22. 
    
23.   <style>
    
24.   /* 样式可以自定义 */
    
25.   </style>

复制代码

运行结果

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

来源:https://www.jb51.net/javascript/326760ddd.htm
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！