zoukankan      html  css  js  c++  java
  • 从零开始学VUE之VueX(actions)

    actions

    异步修改状态信息,比如Ajax

    import Vue from 'vue'
    // 导入vuex
    import Vuex from 'vuex'
    
    import {INCR} from "./type";
    
    // 通过vue安装vuex
    Vue.use(Vuex)
    
    /**
     * 创建store
     * @type {Store<{counter: number}>}
     */
    const store = new Vuex.Store({
      // 用于定义属性
      state:{
        counter:1000
      },
      // 定义用于修改属性的函数 同步提交
      mutations:{
        [INCR](state){
          state.counter+=100;
        },
        // 第一个参数是 state
        modifyCounter(state){
          state.counter--;
        },
        // 传递参数
        modifyCounterVal(state,val){
          state.counter += val;
        }
      },
      // 计算属性也就是getters 用于获取
      getters:{
        // 获取平方
        getCountPF(state) {
          return state.counter * state.counter;
        },
        // 获取 平方的2分之一
        getCountTwoOne(state, getters) {
          return getters.getCountPF / 2;
        },
        // 获取 平方的n分之一 参数传递
        getCountN(state,getters){
          return function (n){
            return getters.getCountPF / n;
          }
        }
      },
      // 用于处理异步状态修改
      actions:{
        updateInfo(context,playod){
          // console.log(playod)
          // // 模拟网络请求
          // setTimeout(() => {
          //   // 传参
          //   console.log(playod.message);
          //   // action 调用 mutations 修改
          //   context.commit(INCR);
          //   // 回调
          //   playod.success();
          // },1000)
          /**
           * 返回 Promise,让外面可以通过then捕获返回结果
           */
          return new Promise((resolve,reject) => {
            // 模拟网络请求
            setTimeout(() => {
              // 传参
              console.log(playod.message);
              // action 调用 mutations 修改
              context.commit(INCR);
              // 回调
              resolve("ajax return data!")
            },1000)
          })
    
        }
      }
    })
    
    export default store

    app.vue

    <template>
      <div id="app">
        <h2>访问store</h2>
        <h3>{{ $store.state.counter }}</h3>
        <!--    通过commit传入方法调用-->
        <button @click="$store.commit('modifyCounter')">通过mutation修改状态</button>
        <!--    传递参数-->
        <button @click="$store.commit('modifyCounterVal',5)">传递参数</button>
        <!--    常量方法-->
        <button @click="incr">常量方法</button>
        <!--    网络请求修改-->
        <button @click="ajaxCommit">网络请求修改</button>
        <button @click="ajaxCommitParam">网络请求修改(传递参数)</button>
        <h2>获取Counter的平方</h2>
        <h2>{{ $store.getters.getCountPF }}</h2>
        <h2>获取Counter的平方 2/1</h2>
        <h2>{{ $store.getters.getCountTwoOne }}</h2>
        <h2>获取Counter的平方 n/1</h2>
        <h2>{{ $store.getters.getCountN(5) }}</h2>
      </div>
    </template>
    
    <script>
    import TabBar from "./components/tabbar/TabBar";
    import {INCR} from "./sotre/type";
    
    export default {
      name: 'App',
      components: {
        TabBar
      },
      methods: {
        incr() {
          this.$store.commit(INCR);
        },
        ajaxCommit() {
          // 调用网络请求修改状态
          this.$store.dispatch("updateInfo");
        },
        ajaxCommitParam() {
          // 调用网络请求修改状态
          // this.$store.dispatch("updateInfo", {
          //   message:'我是参数',
          //   success(){
          //     console.log("回调参数打印")
          //   }
          // });
          this.$store.dispatch("updateInfo", {
            message:'我是参数'
          }).then(res => {
            console.log(res)
          });
        }
      }
    }
    </script>
    
    <style>
    @import "./assets/css/base.css";
    </style>

    作者:彼岸舞

    时间:2021628

    内容关于:VUE

    本文属于作者原创,未经允许,禁止转发

  • 相关阅读:
    mybatis批量插入、批量更新和批量删除
    MySQL本地密码过期处理及永不过期设置
    Intellij IDEA安装与使用,完整详细。
    深入浅出mybatis之useGeneratedKeys参数用法
    springmvc_learn
    Mac下,MySQL数据库中文乱码的解决方法
    springmvc整合mybatis实现商品列表查询
    sql server 数据库导出表里所有数据成insert 语句
    推荐几个bootstrap 后端UI框架
    50个极好的bootstrap框架
  • 原文地址:https://www.cnblogs.com/flower-dance/p/14944671.html
Copyright © 2011-2022 走看看