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.

  • 相关阅读:
    Navicat Premium 12.1.12.0破解版激活
    vConsole调试器
    使用DbFunctions来解决asp.net mvc ef按照日期分组数据
    谷歌浏览器如何安装CRX插件?crx离线插件安装方法
    ASP.NET MVC——CodeFirst开发模式
    Sql server 事务的两种用法
    SQL Server 存储过程
    JqueryMobile新手问题大全
    .net core 轻量级容器 ServiceProvider 源码分析
    Centos7 使用Docker 部署mssql 2017
  • 原文地址:https://www.cnblogs.com/mailyuan/p/11811667.html
Copyright © 2011-2022 走看看