Vuex解决了不同组件之间的数据共享问题,并且做到了数据持久化。
据说,Vuex是大项目用起来好,小项目用起来不舒服也就是说不建议用在小项目上。
路径到当前项目,安装vuex
npm install vuex --save
步骤一src里面新建一个文件夹vuex
步骤二vuex的文件夹下创建store.js
在store.js引入vue和vuex,并且使用:
import Vue from "vue";
import Vuex from "vuex";
Vue.use("Vuex");
state在vuex中用于存储数据
var state={
count:1
}
mutations里面放的是方法,方法主要用于改变state里面的数据
var mutations={
incCount(){
++state.count;
}
}
vuex 实例化 Vuex.store
const store = new Vuex.Store({
state,
mutations
})
暴露:
export default store;
在使用它的组建中引入文件:
import store from '../vuex/store.js';
使用:
export default{
data(){
return {
msg:'我是一个home组件',
value1: null,
}
},
store,
methods:{
incCount(){
//改变vuex store里面的数据
this.$store.commit('incCount'); /*触发 mutations 改变 state里面的数据*/
}
}
}