Vuex 使用总结(详细解答)

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',{参数});