zoukankan      html  css  js  c++  java
  • [vuex]

    1. 需求:

    数据 多组件共享

    2. 涉及:

    数据定义 - /vuex/store/

    index.js

    • /**
       * @file  /vuex/store/index.js
       * @author v_wangyuan01
       */
      import Vue from 'vue';
      import Vuex from 'vuex';
      
      import mutations from './mutations';
      import actions from './actions';
      import getters from './getters';
      
      Vue.use(Vuex);
      export default new Vuex.Store({
          state: { // 状态机 - 数据多组件共享
              userInfo: {
                  userName: '',
                  isLogin: false
              }
          },
          actions, // 行为『检查用户是否登录 isUserLogin』
          mutation, // 执行 如果用户登录, 写入 true; 否则写入 false
          getters
      });

    mutation-type.js // actions.js 和 mutations.js 的通信约定

    • /**
       * @file  封装
       * @author v_wangyuan01
       */
      export const CHANGE_CUR_USER_NAME = 'change_cur_user_name';

    mutations.js // 执行 修改 状态机的数据    mutation 修改 index.js 中的 state

    • /**
       * @file  公用函数
       * @author v_wangyuan01
       */
      import {
          CHANGE_CUR_USER_NAME
      } from './mutation-type';
      
      export default {
          [CHANGE_CUR_USER_NAME](state, {userName}) {
              state.userInfo.userName = userName;
          }
      };

    actions.js // 行为 触发 执行     acttion 触发 mutation

    • /**
       * @file  封装
       * @author v_wangyuan01
       */
      import {
          CHANGE_CUR_USER_NAME
      } from './mutation-type';
      
      export default {
          changeCurUserName({commit}, {userName}) {
              commit(CHANGE_CUR_USER_NAME, {userName}); // commit(行为类型,给 mutation 的值)
          },
          // this.$store.dispatch("changeCurUserName", {})
      };

    getters.js

    • export default {
      };

    数据调用 - 在组件中 ...mapState({})

    •         import {mapState} from 'vuex';
      ... ...
              computed: {
                  ...mapState({
                      userInfo: state => state.userInfo
                  })
              },
      ... ...
              mounted: {console.log(this.userInfo.userName);}

    2.

    3.

    4.

  • 相关阅读:
    springboot打war包汇总
    springBoot获取@NotBlank,@NotNull注解的message信息
    springBoot数据校验与统一异常处理
    ETL子系统
    “斐波那契数列”衍生题
    什么是数据仓库?
    准确率、精确率、召回率、F-Measure、ROC、AUC
    python探索微信朋友信息
    Kaggle之泰坦尼克号幸存预测估计
    通过房价预测入门Kaggle
  • 原文地址:https://www.cnblogs.com/mailyuan/p/11811667.html
Copyright © 2011-2022 走看看