使用Vuex
1涎嚼、安裝vuex
npm install vuex --save 或者 cnpm install vuex --save
2、src目錄下面新建一個vuex的文件夾
3苔货、vuex 文件夾里面新建一個store.js
4立哑、在剛才創(chuàng)建的store.js引入vue 引入vuex 并且use vuex
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
5、定義數(shù)據(jù)
(1)state在vuex中用于存儲數(shù)據(jù)
var state={
count:1
}
6铛绰、定義方法
(1)mutations里面放的是方法,方法主要用于改變state里面的數(shù)據(jù)
var mutations={
incCount(){
state.count++;
}
}
7敢会、把store暴露出去
const store = new Vuex.Store({
state,
mutations
})
export default store;
組件里面使用Vuex
1.引入 store.js
import store from '../vuex/store'
2这嚣、注冊
export default{
data(){
return {
msg:'我是一個組件'
}
},
store,
methods:{
incCount(){
this.$store.commit('incCount'); /*觸發(fā)stroe里面的incCount*/
}
}
}
3、獲取state里面的數(shù)據(jù)
this.$store.state.數(shù)據(jù)
譬如獲取count數(shù)據(jù):this.$store.state.count
4姐帚、觸發(fā) mutations 改變 state里面的數(shù)據(jù)
this.$store.commit('incCount');