A Vue.js project with Vuex, vue-router AND Bulma
# install dependencies
yarn
# serve with hot reload at localhost:8080
yarn dev
# build for production with minification
yarn build
# build for production and view the bundle analyzer report
yarn build --report
Vuex is a library to implement Flux Pattern on Vue.js. I'm sure that it is much easier than on React.js.
Create a store to use Vuex
Let's create a file to use Vuex
on src/store/index.js
.
Notify your store to Vue
Let's make your store activate on src/main.js
.
Setting up Store inside store/modules/*.js
(modulized)
If you open up a sample file named base.js
in src/store/modules
, there are four parts: state
, mutations
, actions
, getters
. state
is the Store to store data on components you will build later. mutations
is triggered from actions
about how to manipulate your state by mutation-types
. actions
are triggered(dispatched) from your components (one of roles of actions is to get data from server). getters
is what could be used on components froms state
. You should declare varibales of state
on getters
to use on components.
Declare your module to main store
Let's include your module on src/store/index.js
.
Access data from Component
If you open up a sample file named Store.vue
in src/components
, you can see friends
in computed
that return this.$store.getters.friends
. You can get, manipulate, and use any data declared of getters
in Store. Everything is done to use data from Store.
Let's trigger actions!
Once you declare store on your Vue project, you can access your store from any components on this
. All you need to do to trigger actions is to dispatch
the name of actions like this.$store.dispatch('getFriends')
. And let getFriends
to do its job.
I think it's much helpful to refer to official document than mine. Definitely.
Author: pretty00butt
Source: https://github.com/pretty00butt/vue-2.x-boilerplate
License: MIT license