npm install vuex--save 安裝(install 后package.json里的dependencies中會(huì)有vuex)
在src文件下添加xuex文件,內(nèi)添加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)
// 應(yīng)用初始狀態(tài)
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上寫了個(gè)超級(jí)簡單的例子https://github.com/littleStar123/vuex
推薦兩個(gè)chrome擴(kuò)展程序
Vue.js devtools?查看vuex的store
Insight.io for Github?查看git文件,可下載單個(gè)文件