vuex中的state使用及说明

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

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

store.state.onlineStatus = true

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

export default {
  onlineStatus: false
}

import { createStore } from 'vuex'
import state from './state'

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

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

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

store.state.themeColor = 'red'

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

export default {
  onlineStatus: false,
  themeColor: 'blue'
}

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

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