如何将字符串导出到另一个Vue文件？

Question

I have a masterData.js file that is a store for my master data, in short the file reads my mongo db data & sends it to other project components. I created a function to export the string in the masterData.js file as:

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

Where payload will store all the rows and payload[0] holds the value of column header names. The output of this chunk of code is like this:

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

I want to transfer the values to masterData.vue file. My code on masterData.Vue is:

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

What else should I add to to check whether the column names are received or not?

Answer 1

If you're trying to access the data in your store from within a component, then you'll want to either just map the state to the component or map a getter to the component. Mutations are used by components (or by actions) to modify the state of the store. So instead you would do something like...

//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,
}

Then

//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

This is how you import stuff in a single file component.

 <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>