腳本之家服務(wù)器常用軟件

快捷導(dǎo)航

vuex中的state使用及說(shuō)明

更新時(shí)間：2024年08月31日 10:23:48 作者：極客李華

這篇文章主要介紹了vuex中的state使用及說(shuō)明,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

vuex中的state

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

入門講解

首先第一步肯定是創(chuàng)建vue項(xiàng)目，具體操作看這篇文章：用命令窗口的方式創(chuàng)建Vue項(xiàng)目

首先在store文件夾下面，創(chuàng)建一個(gè)state.js文件，存放公共的數(shù)據(jù)

在store文件夾下面的index.js文件中進(jìn)行如下配置。

然后前端可以采取這兩種寫法，就可以訪問(wèn)到存儲(chǔ)的數(shù)據(jù)了。

所以我們可以知道的是這個(gè)state.js就是用來(lái)存放數(shù)據(jù)的。

mapState輔助函數(shù)

具體代碼如下：

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

運(yùn)行結(jié)果：

案例

好的，在不增加難度的情況下，我來(lái)給您修改一下之前的案例。

案例 1：在線狀態(tài)

思路

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

這里我們定義了一個(gè)名為 onlineStatus 的屬性，并初始化為 false。

當(dāng)用戶上線時(shí)，可以更新 onlineStatus 屬性：

store.state.onlineStatus = true

這將直接更改 onlineStatus 屬性中的值。

然后，你可以通過(guò)其他組件調(diào)用此值:

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

完整代碼

項(xiàng)目結(jié)構(gòu)

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'
  }
})

我們定義了一個(gè)名為 themeColor 的屬性，并用 "blue" 初始化它。

為了更改主題顏色，可以直接設(shè)置 themeColor 的值：

store.state.themeColor = 'red'

這將直接更改我們的主題顏色值。

然后，你可以通過(guò)其他組件調(diào)用此值：

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>

運(yùn)行結(jié)果