vuex中的state

小鱼儿 2024-03-16 13:35 37阅读 0赞

## vuex中的state ##

### 简介 ###

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

### 入门讲解 ###

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

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

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

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

### mapState 辅助函数 ###

具体代码如下：  
![在这里插入图片描述][433034eaddbf4679a723a2bf09ee3a3a.png]

<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>

运行结果：  
![在这里插入图片描述][26efe0984d6549a5893bfaa79d470482.png]

### 案例 ###

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

#### 案例 1：在线状态 ####

##### 思路 #####

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

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

当用户上线时，可以更新 `onlineStatus` 属性：

store.state.onlineStatus = true

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

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

computed: {
        
      onlineStatus() {
        
        return this.$store.state.onlineStatus
      }
    }

##### 完整代码 #####

项目结构  
![在这里插入图片描述][d1e5074d4246403bb222a2dc8b397526.png]

*  state.js  
    ![在这里插入图片描述][8ee5973494cc4e93ae942b634f0147a0.png]

export default {
        
      onlineStatus: false
    }

*  index.js  
    ![在这里插入图片描述][74d6c1a446d347dfade533e3ec002eb5.png]

import {
         createStore } from 'vuex'
    import state from './state'
    
    export default createStore({
        
      state,
      mutations: {
        
        SET_ONLINE_STATUS (state, status) {
        
          state.onlineStatus = status
        }
      }
    })

*  TestView.vue  
    ![在这里插入图片描述][0466ada9381145a1a61c216dbbb0544d.png]

<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

*  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>

*  运行结果  
    ![在这里插入图片描述][d137f1fe52a743d1a5ef0aab4dd0360c.png]  
    ![在这里插入图片描述][fafb163b06cc4636942b00ce80210800.png]

[Vue]: https://blog.csdn.net/qq_51447496/article/details/131003860
[d6c4b4c0fe7043cd842c9447e147e3b4.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/c0ffc0e078de48bc8205c35a7ff86215.png
[94e499f109da4bd284025c2eca6a5f0e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/9f3ed15e300b4d719bf107567f87a7ea.png
[ed143c4578e2436dbfbc106c92e202e1.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/67f4bd657ed24309bc5ba5db8f68952d.png
[c851ce96640440ecac365b474875c5d8.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/d387cb240ccd412ba5f07f3343715b70.png
[433034eaddbf4679a723a2bf09ee3a3a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/b403e0b7fad8478fa8e5964fe83d17d2.png
[26efe0984d6549a5893bfaa79d470482.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/f6952ac280cd4cb5af1b5699eee18a2a.png
[d1e5074d4246403bb222a2dc8b397526.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/1aab259dfb104b148107796413c851d4.png
[8ee5973494cc4e93ae942b634f0147a0.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/1d24e817cbd942a88a350eae69966896.png
[74d6c1a446d347dfade533e3ec002eb5.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/e601a59699e3440090a567e97e125266.png
[0466ada9381145a1a61c216dbbb0544d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/023fdebe508c4a11849dfa0f69061a74.png
[d137f1fe52a743d1a5ef0aab4dd0360c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/d8c07c7323e34084927282002fb8c9d0.png
[fafb163b06cc4636942b00ce80210800.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/a0e88073d5964ebc9873f5e823b50ad4.png