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

Question

我运行遇到了一个问题，其中 mapState() 不会自动为商店模块创建（简单的值检索）getters。或者也许这是一个时间问题。文档是这样说的：

"When a component needs to make use of multiple store state properties or getters, declaring all these computed properties can get repetitive and verbose. To deal with this we can make use of the mapState helper which generates computed getter functions for us, saving us some keystrokes:"

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

在组件计算属性中使用 mapState() 效果很好 - 直到我将该状态的一部分移动到模块中，此时它停止工作。添加 getter 以拉取状态属性确实有效，但我不喜欢在检索简单值而非计算值时出现代码重复。如果是由于时间原因，某处是否有 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 工作是因为您的模块没有命名空间，因此...

By default, actions, mutations and getters inside modules are still registered under the global namespace

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

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

Vue3//Vuex - how do I add the store only after it has initialized its modules?

vue.js

vuex

vuex-modules

vuejs3