第一步
导入 vue 然后在 main.js 里面导入就可以全局使用了
import Vue from 'vue';
导入 Vuex
import Vuex from 'vuex';
使用 Vuex
Vue.use(Vuex);
vuex的配置项
const options = {
state(固定)是用来存放数据
state: {
isLogin: false 这里可以传数组 对象 ....
},
mutation用来修改state里的属性值
mutations: {
改变DESC_PICTRUES的状态(值)
DESC_PICTRUES(state, payload) {
state.isLogin = payload;
console.log(state.isLogin);
}
}
export default new Vuex.Store(options); 导出
然后去main.js里面导入
import store from "./store/index"; 导入 Vuex
new Vue({
store, 路径文件夹名称
}).$mount("#app");
第二步 在有数据的页面储存数据
created (){
this.$store.commit('DESC_PICTRUES',this.homeData) DESC_PICTRUES储存数据
this.homeData 是渲染列表的所有数据
}
第三步获取数据
created (){
let data = this.$store.state.isLogin isLogin 是state储存的数据
也可以 this.xxxx = this.$store.state.isLogin 直接用
}
vueX原理
网友评论