Vuex
状態管理ツール（共通化など）
vuexを利用しない例
import axios from 'axios'
export default {
name: 'projects',
data: function () {
return {
projects: []
}
},
methods: {
loadProjects: function () {
axios.get('/projects').then((response) => {
this.projects = response.data
}, (err) => {
console.log(err)
})
}
},
mounted: function () {
this.loadProjects()
}
}
vuexの状態遷移図
vuexを利用する例
import projectList from '../components/projectList'
export default {
name: 'projects',
components: {
projectList
},
mounted: function () {
this.$store.dispatch('LOAD_PROJECT_LIST')
}
}
import { mapState } from 'vuex'
export default {
name: 'projectList',
computed: mapState([
'projects'
])
または
computed: {
projects () {
return this.$store.state.projects
}
}
}
import Vue from 'vue'
import Vuex from 'vuex'
import axios from 'axios'
Vue.use(Vuex)
const store = new Vuex.Store({
state: {
projects: []
},
actions: {
LOAD_PROJECT_LIST: function ({ commit }) {
axios.get('/projects').then((response) => {
commit('SET_PROJECT_LIST', { list: response.data })
}, (err) => {
console.log(err)
})
}
},
mutations: {
SET_PROJECT_LIST: (state, { list }) => {
state.projects = list
}
},
getters: {
openProjects: state => {
return state.projects.filter(project => !project.completed)
}
},
modules: {
...
}
})
export default store
import store from './store'
new Vue({
template: `...`,
router,
store,
components: {
...
}
})