vue-papa-parseでjsonに変換した値をスコープ外で使う方法

インストールや取得方法はこの人の記事を見てくれ。

VueでCSV→JSON変換。vue-papa-parseの使い方 | とあるエンジニアのエソラゴト

上記の記事は、ここで終わっている。

onSubmit(evt) {
    evt.preventDefault();
        this.$papa.parse(this.file, {
              header: true,
              complete: function(results) {
                    this.csvData = results.data;
                    console.log(this.csvData);
              },
        });
  },

このthis.csvDataは、vueファイル上で使いまわすことはできない。

あくまで、 complete: function(results) {・・・}の中でしか使えない。

ここから直接apiに投げるなら使えるが・・・

それなら初めからバックエンドでAPIを読み取れるライブラリを使えばええやん！ってなる。

ただ単にCSVファイルのデータをデータベースに登録したいだけならこっちの記事を見てくれ。
Laravel+Vue CSVからデータベースのテーブルに情報を一括登録する

フロントに表示したりする必要があるなら人工夫必要。

なので、vuexのstateに送ると楽。

complete～～のスコープ外でも使えるようにする方法

vue

//vue全体
<template>
    <div>
        <input type="file" v-model="file" accept=".csv">
        <!--値の変更を検知-->
        {{getCsvValue}}
    </div>
</template>
<script>
    export default {
        data() {
            return {
                file:""
            }
        },
        computed: {
            //vuexのstateの中身をcomputedにより監視
            getCsvValue() {
                return this.$store.getters.getCsvValue;
            }
        },
        methods: {
            onSubmit(evt) {
                evt.preventDefault();
                const vm = this
                this.$papa.parse(this.file, {
                    header: true,
                    complete: function (results) {
                        vm.csvData = results.data
                        vm.$store.commit("checkCsv", results.data); //vuexの関数を呼び出す
                    },
                });
            }
        }
    }
</script>

const vm = thisとしないと、vue全体で使うthisがcomplete: function(results) {・・・}の中で使えない。

CSVファイルが読み込まれると同時に{{getCsvValue}}の値がちゃんと変化してくれる。

（vuexのgettersにそうなるようにこの後処理を書く）

vuex

//プロジェクトディレクトリ\resources\js\store\index.js
import Vue from "vue"
import Vuex from "vuex"
import createPersistedState from 'vuex-persistedstate'

Vue.use(Vuex);

const store = new Vuex.Store({
    state: {
        csvData: "",
    },
    getters: {
                //監視対象
        getCsvValue(state) {
            return state.csvData    
        }
    },
    mutations: {
        checkCsv(state, csvData) {
            state.csvData = csvData
        },
    }
}, );
export default store;

こんなかんじ。

何してるかわからなかったり、gettersの用途がいまいちピンとこない場合はこっちの記事を参照してほしい。

vuexのstateの変化をvueで検知する方法 | 結論から答えるIT技術ブログ