[Nuxt] Setup a "Hello World" Server-Rendered Vue.js Application with the Vue-CLI and Nuxt

Install:

npm install -g vue-cli

Init project:

vue init nuxt/starter .

Run:

npm run dev

Create a index.js file inside store folder:

import Vuex from 'vuex'

const store = () => new Vuex.Store({

  state: {

    counter: 0

  }

})

export default store

Display the counter inside pages/index.vue:

<template>

  <div>

    Counter: {{counter}}

  </div>

</template>

<script>

  import { mapState } from 'vuex'

  export default {

    computed: mapState({

      counter: (state) => state.counter

    })

  }

</script>

mapState: return a state tree object.

We can also write:

    computed: {

      ...mapState({

        counter: (state) => state.counter

      })

    }

巴特西

[Nuxt] Setup a "Hello World" Server-Rendered Vue.js Application with the Vue-CLI and Nuxt

最新文章

热门文章