将 vuex 存储导入 laravel 页面时出现意外令牌错误

Question

Vue 的新手和 Vuex 的新手。我试图将一个商店导入我的主页，我的所有组件都从该主页分支出来，但我在浏览器控制台中不断收到 "unexpected token {" 错误。我通读了文档，但找不到任何可以解决此问题的内容。我已尝试尽我所能更改语法的每一点，但似乎没有什么不同。导入中存储周围的括号似乎是问题所在，但是当我删除它们时，我只得到一个新的 "unexpected identifier" 或 "unexpected string" 错误。我导入不正确吗？这种格式适用于我所有的组件，只是不适用于这个新的 vue 实例。

vuex-test.blade.php

@extends('core.core_layouts.core_blank')

@section('browsertitle')
@endsection

@section('top-css')
@endsection

@section('breadcrumb')
@endsection


@section('main')
  <component :is="currentView" v-bind="currentProperties"></component>
@endsection


@section('bottom-js')
<script>

    import { store } from './../stores/store1.js';

    var app = new Vue({
        el:"#app",
        store,
        data: {
        currentView: 'org-list',
        choseOrg: {{ $org }},
    },  // end data
    computed: {
        currentProperties: function() {
            if (this.currentView === 'org-list') { return { } }
            if (this.currentView === 'add-org') { return { parentOrg: '' } }
        }
    },   
    mounted : function() {
    }, // end mounted
    methods: {
    }, // end methods
    components: {
    },
});
</script>
@endsection

store1.js

export const store = new Vuex.Store({
  state: {
    safelyStoredNumber: 'ret',
    count: 2,
  },
  mutations: {
    setOrgIdentity(state, orgID) {
    state.OrgID = orgID
    }
  }
 });

Answer 1

根据评论：

Yes, I get the error at the browser.

import 不会在那里工作。它旨在运行在 node.js 上，在 vue-cli-based 项目的构建阶段。

如果直接将代码部署到浏览器，则需要使用浏览器支持的代码。在这种情况下，导入其他 JavaScript 文件的解决方案是标准 <script> 标签。

因此，在您的代码中，更改：

import { store } from './../stores/store1.js';

类似于（将路径更改为更合适的路径）：

<script src="./../stores/store1.js"></script>

并在 store1.js 中（因为 export 对于 node.js 来说太过分了），替换为：

export const store = new Vuex.Store({

有：

window.store = new Vuex.Store({

将 vuex 存储导入 laravel 页面时出现意外令牌错误

unexpected token error importing a vuex store to laravel page

vuejs2

laravel-5.4

vuex