0901 self-summary
Vue-CLI project vuex warehouse
A concept
vuex warehouse vue global data warehouse, like a singleton, by this in any assembly. $ store to share this data warehouse, complete information exchange between the cross-component.
Vuex data warehouse, will be reset after the browser refresh
II. Use
store.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex);
export default new Vuex.Store({
state: {
// 设置任何组件都能访问的共享数据
course_page: ''
},
mutations: {
// 通过外界的新值来修改仓库中共享数据的值
updateCoursePage(state, new_value) {
console.log(state);
console.log(new_value);
state.course_page = new_value;
}
},
actions: {}
})
Get and modify shared data repository : in any logic assembly
// 获取
let course_page = this.$store.state.course_page
// 直接修改
this.$store.state.course_page = '新值'
// 方法修改
this.$store.commit('updateCoursePage', '新值');
注意点
:
- updateCoursePage: must accept two values, or meaningless