npm install vuex--save 安装(install 后package.json里的dependencies中会有vuex)
在src文件下添加xuex文件,内添加actions.js,getter.js,store.js
store.js中引入
import Vue from 'vue'
import Vuex from 'vuex'
import * as actions from './actions'
import * as getters from './getters'
Vue.use(Vuex)
// 应用初始状态
const state = {
count: 10
}
// 定义所需的 mutations
const mutations = {
ADD(val){
state.count++;
}
}
export default new Vuex.Store({
actions,
getters,
state,
mutations
})
actions.js中添加
export const add = ({commit}) => {
commit('ADD')
}
getter.js中添加
export const getCount = state => {
return state.count;
}
main.js中添加
import vuex from 'vuex' //引用的模块不用加"./"
import store from './vuex/store'
new Vue({
el: '#app',
router,
store,
template: '',
components: { App }
})
接下来就可以使用啦
this.$store.dispatch("add");
this.$store.commit('add')
this.$store.getters.getCount;
在github上写了个超级简单的例子https://github.com/littleStar123/vuex
推荐两个chrome扩展程序
Vue.js devtools 查看vuex的store
Insight.io for Github 查看git文件,可下载单个文件