dispatch:含有异步操作,数据提交至 actions ,可用于向后台提交数据
写法示例: this.$store.dispatch(‘isLogin’, true);
commit:同步操作,数据提交至 mutations ,更新全局变量
写法示例: this.$store.commit(‘loginStatus’, 1);
传统方式:
层级越多,代码越繁杂
-
数据传递:ShopCarContainer.vue → ShopcarNumbox.Vue
实现方式:子组件定义属性,然后父模块通过属性传递数据
-
数据传递:ShopCarContainer.vue ← ShopcarNumbox.Vue
实现方式:子组件绑定一个事件(不进行处理),该事件冒泡后会触发父组件的监听
子:
this.$emit("valueUpdate", 参数)
–valueUpdate
事件冒泡父:
@valueUpdate="xx"
– 监听到冒泡后,回调自身的xx(参数)函数
VueX方式-- 全局变量1.安装
cnpm i vuex -S
src/store/index.js
import Vue from 'vue';
import Vuex from'vuex';
Vue.use(Vuex);
export default new Vuex.Store({
state: {
//这里放全局参数
adminInfo: {
avatar: 'default.jpg'
},
},
mutations: {
// 修改变量的函数,很多时候想当于setter
saveAdminInfo(state, adminInfo) {
state.adminInfo = adminInfo;
}
}
// module:{} 让每一个模块拥有自己的state、mutation、action、getters
})
main.js
import Vue from 'vue'
import App from './App'
import router from './router'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import store from './store'; // 注意路径 ./
Vue.use(ElementUI, router);
Vue.config.productionTip = false;
new Vue({
el: '#app',
router, // 路由映射:Router -> App
store, // 全局变量:store -> App
render: h => h(App) // 自动渲染:ElementUI -> App
});
使用
# 访问全局变量
this.$store.state.adminInfo
# 修改全局变量:提交需要执行的mutations函数
this.$store.commit('saveAdminInfo',{参数});