如何將字符串導出到另一個Vue文件？

Question

我有一個masterData.js文件，該文件存儲我的主數據，簡而言之，該文件讀取我的mongo db數據並將其發送到其他項目組件。 我創建了一個函數，將masterData.js文件中的字符串導出為：

/ ***************************** MUTATIONS
const mutations = {
exportColumns (payload) {
  Object.keys(payload[0]).map(x => { return x; });
 }
}

有效負載將存儲所有行，有效負載[0]保留列標題名稱的值。 此代碼塊的輸出如下所示：

["_id","businessAreaName","businessAreaDisplay","councilDisplay","councilID"]

我想將值傳輸到masterData.vue文件。 我在masterData.Vue上的代碼是：

importColumns () 
  {
  let payload = {
    vm: this,
    mutation: 'masterData/exportColumns'
  };
}

我還應該添加些什么來檢查是否接收到列名？

Answer 1

如果您試圖從組件內部訪問商店中的數據，那么您將希望僅將狀態映射到組件或將吸氣劑映射到組件。 組件（或操作）使用變異來修改存儲的狀態。 所以取而代之的是你會做...

//masterData.js
//assuming this gets rolled up as a module called masterdata to the primary store
//store for payload state
const state = {
  payload: null,
}

//allows payload to be set -- not sure how you are retrieving the payload but you can use this to store it however you get it
const mutations = {
  setPayload (state, payload) {
    state.payload = payload
  }
}

//get just the columns
const getters = {
  getColumns (state) {
    Object.keys(state.payload[0]).map(x => { return x; })
  }
}

export default {
  state,
  mutations,
  getters,
}

然后

//masterData.vue
<template>
  //...
</template>

<script>
  import { mapGetters, mapState } from 'vuex'

  export default {
    computed: {
      //I believe getting state from a store module requires a function like this
      ...mapState({
        payload: function(state) {
          return state.masterdata.payload
        },
      }),
      //I think for getters you can just reference the method and it will find it
      ...mapGetters([
        'getColumns',
      ])
    },
  }
</script>

Answer 2

這是在單個文件組件中導入內容的方式。

 <template> <!-- html stuff --> </template> <script> import Mutations from 'yourModule.js' export default { name: 'YourComponent', props: {}, data(){ return { foo: 'foo' } }, methods{ mymethod() { Mutations.exportColumn(this.foo); }, } } </script>