zoukankan      html  css  js  c++  java
  • 向vuex存储数据和获取数据-和直接调用actions.js中的异步方法

    向vuex的变量存储数据
    1.在state.js中添加  userInfo: {},
    2.actions.js中添加同步用户信息-将参数userInfo传递给USER_INFO
      创建一个方法-不用异步方法
        syncUserInfo({commit}, userInfo){
          commit(USER_INFO, {userInfo});
        },
    3.创建一个中间变量mutation-types.js
        export const USER_INFO = 'user_info';
    4.在actions.js中引入变量-USER_INFO
      import {
        USER_INFO
      } from './mutation-types'
    5.在mutations.js中引入变量
         import {
            USER_INFO
          } from './mutation-types'
       将userInfo赋值给state
          [USER_INFO](state, {userInfo}) {
            state.userInfo = userInfo;
          },
    6.外界直接调用actions.js中的方法   syncUserInfo
     import {mapActions} from 'vuex'
      methods: {
        //  存到vuex-是个方法。需要...延展符展开
        ...mapActions(['syncUserInfo']),
      }
      ------------------
      向vuex中获取数据
      1.引入  import {mapState} from 'vuex';
      2.计算属性
            computed:{
              ...mapState(['userInfo'])
            },
    

      ------------------------------------------

    直接调用vuex-中 actions.js的异步方法--

    this.$store.dispatch
        created(){
           // 调用vuex-actions中的方法-刚进入app,就需要验证登录的时效性
           this.$store.dispatch('getUserInfo')
        },
    

      actions.js

      // 7. 异步获取用户信息
      async getUserInfo({commit}){
        const result = await getUserInfo(); // actions中调用getUserInfo方法---需要引入import
        console.log(result);
        if(result.success_code === 200){
           commit(USER_INFO, {userInfo: result.message});
        }
      },
    

      actions中调用getUserInfo方法---需要引入

    import {
    getUserInfo,
    } from '../api'
    ----------------------
    api-index.js
    // 2.9 获取登录的用户信息
    export const getUserInfo = () => ajax(BASE_URL + '/api/user_info');
  • 相关阅读:
    二分查找
    Java版各种排序算法 (冒泡,快速,选择,插入)
    mysql如何利用Navicat 导出和导入数据库
    eclipse项目红色叹号解决方法
    解决tomcat占用8080端口问题
    Window.onLoad 和 DOMContentLoaded事件的先后顺序
    jquery $(document).ready() 与window.onload的区别
    jQuery文档加载完毕的几种写法
    Emmet使用手册
    Sublime Text 3快捷键
  • 原文地址:https://www.cnblogs.com/fdxjava/p/12283685.html
Copyright © 2011-2022 走看看