vuex突变，是编辑还是插入？

Question

我遇到了这个问题，vuex是我的新手，我正在使用nuxt，我的问题是，例如，我需要从存储状态加载数据。

我有这家商店：

export const state = () =>({
    products:[
      {
        id:1,
        name:"onion",
        stock:1,
        price:12.00,
        created_at:"01/01/2020"
      },
      {
        id:2,
        name:"rice",
        stock:2,
        price:10.52,
        created_at:"02/01/2020"
      }
    ]
    })

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

我需要以某种形式从产品数组中加载商品，我的问题是我需要知道用户需要执行的操作，使用加载的数据插入新产品，或者只是对其进行更新。

Answer 1

例如，您有一个组件。在该组件中，您具有脚本标签，并且可以直接从商店访问数据。

export default {
   data(){
      return {
         products: this.$store.state.products
      }
   }
}

products现在是反应性的。每当您在商店中更改阵列时，它也会在您的组件中自动更改。

例如，插入数据可以这样工作：

export const mutations = {
   addItem (state, payload) {
      state.products.push(payload);
   }
}

在组件的某个地方，您提交了突变并将数据传递给它。

...
methods: {
   addItemToCart(){
      //            NAME OF MUTATION  PAYLOAD
      //-----------------vvvvvvvvv--vvvvvvvvvv
      this.$store.commit("addItem", someVariable);
   }
}
...

在nuxt中，您有一个名为store的文件夹。确保您的文件名为index.js，其根文件nuxt.js正在搜索。