Vuex取值詳解

一、Vuex取值方式

Vuex是Vue.js的一個狀態管理工具，可以集中管理所有組件的狀態，它包含了全局的狀態管理和修改該狀態的方法。在Vuex中，我們可以使用以下方式來取值：

1.通過this.$store.state.xxx獲取值

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

在這種方式下，我們可以通過computed計算屬性進行值的獲取。然後，在模版中使用{{ xxx }}就可以獲取到值了。

2.通過mapState獲取值

import { mapState } from 'vuex'

computed: {
  ...mapState({
    xxx: state => state.xxx
  })
}

這種方式是通過Vuex的輔助函數mapState，將Vuex管理的狀態映射為組件的計算屬性。然後在模版中使用{{ xxx }}就可以獲取到值了。

3.通過getter獲取值

const store = new Vuex.Store({
  state: {
    xxx: ''
  },
  getters: {
    getXxx: state => {
      return state.xxx
    }
  }
})

computed: {
  xxx() {
    return this.$store.getters.getXxx
  }
}

可以通過getter來獲取Vuex的狀態。這種方式一般用於計算獲取到的值的過程中需要進行多步操作的情況。

二、Vuex取值數據判空

在使用Vuex取值時，我們需要注意該數據是否為空，否則可能會出現異常。常用的判斷方式有以下幾種：

1.使用if語句判空

if (this.$store.state.xxx) {
  //執行代碼
}

2.使用三元運算符判空

{{ this.$store.state.xxx ? this.$store.state.xxx : 'default' }}

3.使用短路運算符判空

{{ this.$store.state.xxx || 'default' }}

三、Vuex取值為空

當我們獲取的Vuex數據為空時，我們可以使用一些默認值或者提示語來代替空值。常用的方式有以下幾種：

1.設置默認值

computed: {
  xxx() {
    return this.$store.state.xxx || 'default'
  }
}

2.設置提示語

{{ this.$store.state.xxx || 'xxx為空' }}

四、Vuex取值和傳值

在組件中，我們可以通過使用Vuex來進行值的傳遞。獲取其中的值後，可以用來賦值給新的數據。方法如下：

1.獲取值並傳遞

computed: {
  xxx: {
    get() {
      return this.$store.state.xxx
    },
    set(newValue) {
      this.$store.commit('setXxx', newValue)
    }
  }
}

這裡get方法是用來獲取值的，set方法是用來傳值的。我們在調用set方法時，會觸發一個名為setXxx的mutation方法，該方法是用來改變state中的數據的。

五、Vuex取值死循環

在使用Vuex時，有時候我們會遇到取值死循環的情況，這是由於我們在某些組件中將引用了其他組件中的計算屬性，從而導致了get方法的無限循環。解決方式如下：

1.使用watch監聽

watch: {
  xxx(newValue) {
    this.xxx = newValue
  }
}

在這種情況下，我們可以使用watch來監聽變數的變化，然後在值發生變化時將新值賦值給另一個變數即可。

六、Vuex怎麼實現存儲和取值

使用Vuex進行數據的存儲和取值，我們需要依次完成Vuex的store、state、mutation、getters、actions、modules等操作。其中store是一個容器，用來存儲各個模塊(state, mutation, action等)。整個過程如下：

1.創建store並設置初始狀態

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    message: 'hello!'
  },
  mutations: {
    setMessage(state, value) {
      state.message = value
    }
  },
  actions: {
    asyncSetMessage(context, value) {
      setTimeout(() => {
        context.commit('setMessage', value)
      }, 3000)
    }
  },
  getters: {
    getMessage(state) {
      return state.message
    }
  }
})

2.使用mapState, mapGetters, mapMutations和mapActions獲取狀態

<template>
  <div>
    {{ message }}
    <button v-on:click="setMessage">set Message</button>
  </div>
</template>

<script>
  import { mapState, mapMutations } from 'vuex'

  export default {
    computed: {
      ...mapState({
        message: state => state.message
      })
    },
    methods: {
      ...mapMutations([
        'setMessage'
      ])
    }
  }
</script>

七、Vuex取值不對行

在使用Vuex時，我們有時會遇到取值不正確的情況，通常是因為我們取值的路徑不正確導致的。常見的解決方式有以下幾種：

1.檢查路徑是否正確

<template>
  <div>
    {{ this.$store.state.xxx.yyy.zzz }}
  </div>
</template>

<script>
  export default {
    mounted() {
      console.log(this.$store.state.xxx) //輸出該對象檢查路徑
    }
  }
</script>

2.使用getter

const store = new Vuex.Store({
  state: {
    xxx: { yyy: { zzz: 'value' } }
  },
  getters: {
    getXxx(state) {
      return state.xxx
    }
  }
})

computed: {
  value() {
    return this.$store.getters.getXxx.yyy.zzz
  }
}

八、Vuex取值在js文件取值

在vue的業務組件中，我們可以通過this.$store.state.xxx獲取Vuex中的數據。但是在js文件中卻無法使用this，在這種情況下，我們需要使用Vuex的輔助函數來獲取值。常見的有以下幾種方式：

1.導入store並獲取state中的值

import { store } from '@/store'

const value = store.state.xxx

2.使用mapState

import { mapState } from 'vuex'

computed: {
  ...mapState(['xxx'])
}

methods: {
  test() {
    var value = this.xxx
  }
}

九、Vue取值方式

在Vue中，我們也可以通過this.xxx來獲取數據。常見的取值方式有以下幾種：

1.在Vue組件中通過this.xxx獲取值

<template>
  <div>
    {{ xxx }}
  </div>
</template>

<script>
  export default {
    data() {
      return {
        xxx: 'value'
      }
    }
  }
</script>

2.在Vue組件中通過computed計算屬性獲取值

<template>
  <div>
    {{ computedValue }}
  </div>
</template>

<script>
  export default {
    data() {
      return {
        value: 'value'
      }
    },
    computed: {
      computedValue() {
        return this.value
      }
    }
  }
</script>

3.在Vue組件以外的地方獲取值

import Vue from 'vue'

Vue.prototype.$globalValue = 'value'

//在其他組件中，通過this.getAllValue()獲取到任何組件中的'globalValue'
export default {
  methods: {
    getAllValue() {
      return this.$root.$children[0].$root.$data.globalValue
    }
  }
}

以上是針對Vuex取值的詳細闡述。Vuex的取值方式有許多種，每種方式都有其適用的場景。在使用過程中，需要考慮到數據是否為空、取值是否正確等情況。通過深入了解Vuex的操作，有助於我們更好地應用和擴展Vuex。