使用Vuex
1、安装vuex
npm install vuex --save 或者 cnpm install vuex --save
2、src目录下面新建一个vuex的文件夹
3、vuex 文件夹里面新建一个store.js
4、在刚才创建的store.js引入vue 引入vuex 并且use vuex
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
5、定义数据
(1)state在vuex中用于存储数据
var state={
count:1
}
6、定义方法
(1)mutations里面放的是方法,方法主要用于改变state里面的数据
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'); /*触发stroe里面的incCount*/
}
}
}
3、获取state里面的数据
this.$store.state.数据
譬如获取count数据:this.$store.state.count
4、触发 mutations 改变 state里面的数据
this.$store.commit('incCount');