Vuex プロジェクト構造ディレクトリと簡単な構成の紹介

import Vue from 'vue'
import Vuex from 'vuex'
import actions from './actions'
import mutations from './mutations'
Vue.use(Vuex)
const state = {
 a: '初始值',
 b: 'balabala...'
}
export default new Vuex.Store({
  state,
  actions,
  mutations
})

import store from './store/index'
new Vue({
 el: '#app',
 router,
 store,
 ...
})

export default {
  doneTodos: state = >{
   return state.todos.filter(todo = >todo.done)
  }
}

computed: {
 doneTodosCount () { 
  return this.$store.getters.doneTodosCount 
 }
}

export default{

 getTodoById: (state) => (id) => { 
  return state.todos.find(todo => todo.id === id) 
 }
}

computed: {
 getTodoById() { 
  return this.$store.getters.getTodoById(‘参数')
 }
}

export default {
  increment(state) {
   //变更状态
   state.count++
  }
}

this.$store.commit(state,payload)
actions.js简单配置：
export default{
 action (context) {
 //异步操作
  setTimeout（（）=>{
   //变更状态
   context.commit('mutationFunName'，value)
  }）
 }
}

this.$store.dispatch('mutationFunctionName')
2018-04-07 18:13:34