Vue3//Vuex - 如何仅在初始化其模块后添加商店？

Question

我之前遇到了一个问题，mapState() 不会为存储模块自动创建（简单的值检索）getter。或者也许这是一个时间问题。文档是这样说的：

"当一个组件需要使用多个存储状态属性时 或 getter，声明所有这些计算属性可能会重复 并且冗长。为了解决这个问题，我们可以使用 ma​​pState 助手 为我们生成计算的 getter 函数，为我们节省了一些 击键："

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

模块状态是 always 命名空间的。例如，您在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。

---

您的 getter 可以工作，因为您的模块没有命名空间，因此...

默认情况下，模块内的动作、突变和getter仍然注册在全局命名空间

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