Javascript 未呈现本地存储数据

目前我正在制作一个电子商务网站。我想按用户将订单数据存储在本地存储器上。这是我的密码：

详细信息.vue

import DataService from '../web_service/services'

export default {
  name: 'details',
  props: ['userId'],
  data () {
    return {
      datas: null,
      url: '/' + this.userId,
      value: 1
    }
  },
  created () {
    DataService.getFindById(this.url)
      .then((res) => {
        this.datas = res.data.data
      })
      .catch((err) => {
        alert('error when fetching API' + err)
      })
  },
  methods: {
    buyNow () {
      let order = {
        product: this.datas.name,
        price: this.datas.price,
        quantity: this.value
      }

      this.$store.commit('addOrder', order)
      this.$router.push('/cart')
    }
  }
}

store.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
    state: {
        order: JSON.parse(localStorage.getItem("order")),
    },
    mutations: {
        addOrder: (state, product) => {
            const arrProduct = []
            const parse = JSON.stringify(product)
            state.order = parse

            localStorage.setItem('order', parse)
        }
    }
})

shopCart.vue

<template>
  <div class="shopCart>
  <b-card-body>
          <b-card-text>
            <div v-if="orders" class="float-left">
              <h5>{{orders.product}}</h5>
              <h5>{{orders.price}}</h5>
            </div>
          </b-card-text>
        </b-card-body>
  </div>
</template>
<script>
export default {
    name: 'shopCart',
    data () {
        return {
            orders: null
        }
    },
    created () {
        this.orders = this.$store.state.order
        
    }
}   
</script>

---

当我尝试接受订单场景时，它会直接发送到/购物车路线，然后显示我的商品。但是，不会呈现我的订单数据。当我刷新页面时，它会显示我的订单数据。有人知道解决办法吗？提前谢谢

一切正常，只是您已将用于本地存储的解析字符串的顺序设置为。因此，当您查看购物车页面时，orders.product和orders.price是未定义的，即使v-if为true

改变你的变异：

addOrder:状态，产品=>{ 常数乘积=[] const parse=JSON.stringifyproduct state.order=产品；//✅ 将其设置为产品，而不是字符串 localStorage.setItem'order'，解析 }

---

一切正常，只是您已将用于本地存储的解析字符串的顺序设置为。因此，当您查看购物车页面时，orders.product和orders.price是未定义的，即使v-if为true

改变你的变异：

addOrder:状态，产品=>{ 常数乘积=[] const parse=JSON.stringifyproduct state.order=产品；//✅ 将其设置为产品，而不是字符串 localStorage.setItem'order'，解析 }