javascript - Vuex mapState reference error when vuex.js is included via script tag

I'm running some test code for Vue.js and include Vue.js, Vuex and the javascript files via script tags (because it is for testing purposes only I don't want to use a build tool).

Most of the code runs correctly but the Vuex map functions (mapState, mapGetters ...) won't work. I always get ReferenceError: Can't find variable: mapState. Why can't I access the mapState? Aren't that global functions when included via script tag?

Just an example using code from the vue docs:

index.html

<html>

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />

    <title></title>
</head>


<body>

    <div id="app"></div>


    <!-- Libraries ---------- -->
    <script src="vendor/js/vue.js" type="text/javascript"></script>
    <script src="vendor/js/vuex.js" type="text/javascript"></script>

    <script src="app/js/store.js" type="text/javascript"></script>
    <script src="app/js/app.js" type="text/javascript"></script>

</body>

</html>

store.js

const state = {
    count: 0
}


const getters = {
    evenOrOdd: state => state.count % 2 === 0 ? 'even' : 'odd'
}


const mutations = {
    increment (state) {
        state.count++
    },
    decrement (state) {
        state.count--
    }
}


const actions = {
    increment: ({ mit }) => mit('increment'),
    decrement: ({ mit }) => mit('decrement'),
    incrementIfOdd: ({ mit, state }) => {
        if ((state.count + 1) % 2 === 0) {
            mit('increment')
        }
    },
    incrementAsync: ({ mit }) => {
        return new Promise((resolve, reject) => {
            setTimeout(() => {
                mit('increment')
                resolve()
            }, 1000)
        })
    }
}


const store = new Vuex.Store({
    state,
    getters,
    mutations,
    actions
})

app.js

const app = new Vue({
    el: '#app',
    template: `
        <main>
            <h1 class="title">Heading</h1>
        </main>
    `,
    store,
    puted: {
        ...mapState([count])
    }
});

I'm running some test code for Vue.js and include Vue.js, Vuex and the javascript files via script tags (because it is for testing purposes only I don't want to use a build tool).

Just an example using code from the vue docs:

index.html

<html>

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />

    <title></title>
</head>


<body>

    <div id="app"></div>


    <!-- Libraries ---------- -->
    <script src="vendor/js/vue.js" type="text/javascript"></script>
    <script src="vendor/js/vuex.js" type="text/javascript"></script>

    <script src="app/js/store.js" type="text/javascript"></script>
    <script src="app/js/app.js" type="text/javascript"></script>

</body>

</html>

store.js

const state = {
    count: 0
}


const getters = {
    evenOrOdd: state => state.count % 2 === 0 ? 'even' : 'odd'
}


const mutations = {
    increment (state) {
        state.count++
    },
    decrement (state) {
        state.count--
    }
}


const actions = {
    increment: ({ mit }) => mit('increment'),
    decrement: ({ mit }) => mit('decrement'),
    incrementIfOdd: ({ mit, state }) => {
        if ((state.count + 1) % 2 === 0) {
            mit('increment')
        }
    },
    incrementAsync: ({ mit }) => {
        return new Promise((resolve, reject) => {
            setTimeout(() => {
                mit('increment')
                resolve()
            }, 1000)
        })
    }
}


const store = new Vuex.Store({
    state,
    getters,
    mutations,
    actions
})

app.js

const app = new Vue({
    el: '#app',
    template: `
        <main>
            <h1 class="title">Heading</h1>
        </main>
    `,
    store,
    puted: {
        ...mapState([count])
    }
});

Share Improve this question edited Feb 12, 2018 at 13:44 asked Feb 12, 2018 at 13:29 Mountain 1,0592 gold badges11 silver badges22 bronze badges

Include unless your code. – Radonirina Maminiaina Commented Feb 12, 2018 at 13:31
If you are including Vuex as a script rather than building, you will need to access mapState via Vuex as Vuex.mapState. – Bert Commented Feb 12, 2018 at 13:44
1 This got me one step further. Using puted: Vuex.mapState({count: "count"}) works but puted: { ...Vuex.mapState({count: "count"}) } gives me an Syntax Error: Unexpected token '...'. Expected a property name. error. What's the problem with using the spread operator here because I will need it to merge the states with my own puted properties. – Mountain Commented Feb 12, 2018 at 14:01
Object spread (...mapState) is not widely available in browsers at this time. You'll have to do it the old fashioned way. – Bert Commented Feb 12, 2018 at 14:09
You were right. The browser has support for array spreading but not for object spreading. Is there a simple 'old fashioned way'? I think the fact that all local puted properties are functions inside the puted object an not just key:value pairs will make it difficult. – Mountain Commented Feb 12, 2018 at 16:18

Add a ment |

1 Answer 1

Sorted by: Reset to default 7

In Many code examples I see

import { mapState } from 'vuex'

used to allow mapState to be referenced.

But as you say, you are including Vue and Vuex by referencing their scripts instead of using a build system

<script src="vendor/js/vue.js" type="text/javascript"></script>
<script src="vendor/js/vuex.js" type="text/javascript"></script>

And in this case, directly using "Vuex" as below works:

Vuex.mapState

发布者：admin，转转请注明出处：http://www.yc00.com/questions/1745346105a4623550.html

javascript - Vuex mapState reference error when vuex.js is included via script tag - Stack Overflow

1 Answer 1

发表回复

评论列表（0条）

联系我们

400-800-8888

javascript - Vuex mapState reference error when vuex.js is included via script tag - Stack Overflow

1 Answer 1

相关推荐