import { useStore } from "vuex";取出结果是undefind?

这是store下index.js的代码

import { createStore } from "vuex";

export default createStore({
  state: {
    cartList:{
        
    }
  },
  mutations: {
      changeCartItemInfo(state, payload){
          const{shopId, productId, productInfo}=payload;
        
          let shopInfo=state.cartList[shopId]
        
          if(!shopInfo){ shopInfo={}  }
          let product=shopInfo[productId]
          if(!product){
              product =productInfo
              product.count=0
          }
          product.count =product.count+payload.num
          if(payload.num>0){product.check=true}
          shopInfo[productId]=product
          
          state.cartList[shopId]=shopInfo
            
      },
      changeCartItemChecked(state,payload){
          const{shopId,productId} =payload
          const product= state.cartList[shopId][productId]
          product.check=!product.check
      }
  },
  actions: {},
  modules: {},
});

这是运行代码

<script>
import { computed } from "vue";
import { useStore } from "vuex";
console.log(useStore());

import { useRoute } from "vue-router";
import { useCommonCartEffect } from "./CommonCartEffect.js";

const useCartEffect = (shopId) => {
  const store = useStore();

  // console.log(store);
  // console.log(shopId);
  const { changeCartItemInfo } = useCommonCartEffect();
  const changeCartItemChecked = (shopId, productId) => {
    store.commit("changeCartItemChecked", { shopId, productId });
  };

  // const route = useRoute();
  // const shopId = route.params.id;
  const cartList = store.state.cartList;
  const total = computed(() => {
    const productList = cartList[shopId];
    /* console.log(productList); */
    let count = 0;
    if (productList) {
      for (let i in productList) {
        const product = productList[i];
        count += product.count;
      }
    }
    return count;
  });
  const price = computed(() => {
    const productList = cartList[shopId];
    let count = 0;
    if (productList) {
      for (let i in productList) {
        const product = productList[i];
        if (product.check) {
          count += product.count * product.price;
        }
      }
    }
    return count.toFixed(2);
  });
  const productList = computed(() => {
    const productList = cartList[shopId] || [];
    return [productList];
  });
  const cleanCartProducts = (shopId) => {
    store.commit("cleanCartProducts", { shopId });
  };
  return {
    total,
    price,
    productList,
    cleanCartProducts,
    changeCartItemInfo,
    changeCartItemChecked,
  };
};
export default {
  name: "Cart",
  setup() {
    const route = useRoute();
    const shopId = route.params.id;
    const { changeCartItemInfo } = useCommonCartEffect(shopId);
    const {
      total,
      price,
      productList,
      changeCartItemChecked,
      cleanCartProducts,
    } = useCartEffect(shopId);
    console.log(productList);

    return {
      total,
      price,
      shopId,
      productList,
      changeCartItemInfo,
      changeCartItemChecked,
      cleanCartProducts,
    };
  },
};
</script>

新人写东西的时候发现的莫名的问题
import { useStore } from "vuex";
console.log(useStore());
正常情况下应该是可以取出同步数值的,但是实际却是undefin,最终输出的结果却是undefind,网上的解决办法均不起作用。
而且在其他页面可以取出数值

阅读 4.5k
1 个回答

你 store 挂载到 Vue 实例上没有, app.use(store);store实例的 导出对不对 export ==> import { store } from '..'
export default ==> import store from '..'

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题