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。