Introducing Vuex Chapter 8}export const store = new Vuex.Store({
state
})In the preceding code, we set the default state for a variable called count as 0 and exported
a Vuex state through the store.
Now, we will need to modify src/main.js:
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an
alias.
import Vue from 'vue'
import App from './App'
import { store } from './store/store'Vue.config.productionTip = false/* eslint-disable no-new */
new Vue({
el: '#app',
store,
components: { App },
template: '<App/>'
})The preceding code imports the store file that we just created, and we can access this
variable in our vue components.
Let's move on to creating a component that will fetch this store data. A default component
is created when we create a new application with Vue. If we look into the src/components
directory, we will find a file called HelloWorld.vue. Let's use the same
component, HelloWorld.vue, or you can create a new one. Let's modify this file to access
the count, which we defined in the state.
In src/components/HelloWorld.vue, add the following code:
<template>
<div class="hello">
<h1>{{ $store.state.count }}</h1>
</div>
</template><script>