Vuex中的State使用介绍

page3.vue和page4.vue代码：

page3.vue

<template>
  <div>
    <h2>我是第一个页面</h2><br>
    <router-link to='/page4'>查看第二个页面</router-link>
    <ul class="ul_list">
      <li v-for="item in list">
        <p class="name">商品：{{item.name}}</p>
        <p class="price">价格：￥{{item.price}}</p>
      </li>
    </ul>
  </div>
</template>
<script>
 export default {
   data() {
    return {
      // 直接作为data()中属性值使用
      list: this.$store.state.goodsList,
    }
   },
   mounted() {
    //  通过钩子函数使用
    //  this.list = this.$store.state.goodsList
   },
  //  计算属性
   computed: {
    list() { // 获取store中的数据
      return this.$store.state.goodsList;
    }
   },
  }
</script>

组件仍然保有局部状态

使用 Vuex 并不意味着你需要将所有的状态放入 Vuex。虽然将所有的状态放到 Vuex 会使状态变化更显式和易调试，但也会使代码变得冗长和不直观。如果有些状态严格属于单个组件，最好还是作为组件的局部状态。你应该根据你的应用开发需要进行权衡和确定。

效果

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，谢谢大家对软件开发网的支持。如果你想了解更多相关内容请查看下面相关链接