Vue3 // Vuex-仅在初始化模块后才添加商店吗？

Question

我之前遇到了一个问题，其中mapState（）不会自动为商店模块创建（简单值检索）getter。也许这是一个时间问题。文档说：

”当一个组件需要利用多个存储状态属性时 或吸气剂，声明所有这些计算出的属性可以重复 和冗长。为了解决这个问题，我们可以使用 mapState帮助器<​​/ strong> 为我们生成了计算的吸气功能，为我们节省了一些 击键：“

https://vuex.vuejs.org/guide/state.html

在组件的计算属性中使用mapState（）效果很好-直到我将某些状态移动到模块中，这时它退出了工作。添加一个getter来拉取state属性确实可以，但是当检索简单的而不是计算的值时，我不喜欢代码重复。如果是由于时间原因，在某处是否有store.ready（app.use（store））函数？

// store.js
import { createStore } from 'vuex';
import products from './products.js'
import cart from './cart.js'

const store = createStore({
   modules:{
      products,
      cart
   },
   state() {
      return {
         isLoggedIn: false,
      }
   },
   mutations: {
      login(state) {
         state.isLoggedIn = true;
      },
      logout(state) {
         state.isLoggedIn = false;
      },
   },
})

export default store;

// products.js

export default {
   state() {
      return {
         products: [
            {
               id: 'p1',
               image:
                  'https://upload.wikimedia.org/wikipedia/commons/thumb/5/5a/Books_HD_%288314929977%29.jpg/640px-Books_HD_%288314929977%29.jpg',
               title: 'Book Collection',
               description:
                  'A collection of must-read books. All-time classics included!',
               price: 99.99,
            },
         ],
      }
   },
   getters:{
      products(state){
         return state.products;
      }
   }
}

<!-- productList.vue -->

<template>
  <section>
    <ul>
      <product-item
        v-for="prod in products"
        :key="prod.id"
        :id="prod.id"
        :title="prod.title"
        :image="prod.image"
        :description="prod.description"
        :price="prod.price"
      ></product-item>
    </ul>
  </section>
</template>

<script>
import ProductItem from '../components/products/ProductItem.vue';
import { mapState } from 'vuex'
//import { mapGetters } from 'vuex'

export default {
  components: {
    ProductItem,
  },
  computed: {
    ...mapState([       //This does not work
      'products'
    ])
    // ...mapGetters([    This does
    //   'products'
    // ])
  },
  mounted(){
    console.log(this.products)
  }
};
</script>

<style scoped>
  ul {
    list-style: none;
    margin: 2rem auto;
    padding: 0;
    max-width: 40rem;
  }
</style>

Answer 1

模块状态始终为 命名空间。例如，products模块中的products状态仅在

下可用

//         ? module ? state
store.state.products.products

要将mapState与模块一起使用，可以使用以下两个选项之一

computed: {
  ...mapState({
    products: state => state.products.products
  }),
  ...mapState("products", {
    products: state.products
  })
  ...mapState("products", [
    "products"
  ])
}

其中每一个都会将products模块的products状态映射到组件中的this.products。

---

您的 getters 之所以起作用，是因为您的模块没有命名空间，因此...

默认情况下，模块内的动作，变异和获取方法仍会注册在全局命名空间

下

请参见https://vuex.vuejs.org/guide/modules.html#namespacing