欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

Vuex的actions属性的具体使用

程序员文章站 2022-08-18 15:46:29
vuex 的 action 属性内,可以定义异步操作逻辑,以满足某些业务场景要求。在组件内,是通过 $store.dispatch 来触发 action 定义的函数。...

vuex 的 action 属性内,可以定义异步操作逻辑,以满足某些业务场景要求。在组件内,是通过 $store.dispatch 来触发 action 定义的函数。

我们使用 action,来为计数器异步增 1。

1 promise 方式

main.js:

const store = new vuex.store({
  state: {
    count: 0,
  },
  mutations: {
    increment(state, n = 1) {
      state.count += n;
    }
  },
  actions: {
    asyncinrement(context) {
      return new promise(resolve => {
        settimeout(() => {
          context.commit('increment');
          resolve();
        }, 1000)
      });
    }
  }
});

这里使用了 promise ,在 1 s 后提交了 mutations 中定义的 increment 递增函数。它是 es6 语法,有三种状态:

状态 说明
pending 进行中
resolved 已完成
rejected 失败

 index.vue:

<template>

  <div>
    {{count}}
    <button @click="asyncincrementbyaction">+1</button>
  </div>
</template>

<script>
  export default {
    name: "index.vue",
    computed: {
      count() {
        return this.$store.state.count;
      }
    },
    methods: {
      asyncincrementbyaction() {
        this.$store.dispatch('asyncinrement').then(() => {
          console.log(this.$store.state.count);
        })
      }
    }
  }
</script>

2 callback 方式

也可以使用普通回调来实现异步方案。

main.js

const store = new vuex.store({
...
  actions: {
   ...
    asyncinrement2(context, callback) {
      settimeout(() => {
        context.commit('increment');
        callback();
      }, 1000);
    }
  }
});

index.vue:

<template>
  <div>
    ...
    {{count}}
    <button @click="asyncincrementbyaction2">+1(callback)</button>
  </div>
</template>

<script>
  export default {
    ...
    methods: {
      ...
      asyncincrementbyaction2() {
        this.$store.dispatch('asyncinrement2',() => {
          console.log(this.$store.state.count);
        });
      }
    }
  }
</script>

3 效果

Vuex的actions属性的具体使用

vuex action和mutations的区别

action的功能和mutation是类似的,都是去变更store里的state,不过action和mutation有两点不同:

1、action主要处理的是异步的操作,mutation必须同步执行,而action就不受这样的限制,也就是说action中我们既可以处理同步,也可以处理异步的操作

2、action改变状态,最后是通过提交mutation

使用方式: 

安装:

npm install vuex --save

引用:

store.js

方法一:

/**
 * 创建完文件后需要去到main.js中引入成全局
 */
import vue from "vue";
import vuex from "vuex";
//使用vuex
vue.use(vuex);
const state = {
 targetuser: {} //用户详细资料数据
};
 
const getters = {
 //获取到用户状态,//实时监听state值的变化(最新状态)
 targetuser: state => state.targetuser
};
 
const mutations = {
 //自定义改变state初始值的方法
 set_target_user(state, targetuser) {
  if (targetuser) {
   state.targetuser = targetuser; //如果targetuser有内容就赋给状态信息
  } else {
   //如果没内容就给targetuser赋空对象
   state.targetuser = {};
  }
 }
};
 
const actions = {
 //这里面的方法是用来异步触发mutations里面的方法,context与store 实例具有相同方法和属性
 // 页面定义的setgargetuser,targetuser为页面传过来的值
 setgargetuser({ commit }, targetuser) {
  commit("set_target_user", targetuser);
 }
};

存储页面:

this.$store.dispatch('setgargetuser',friend)

获取页面:

 computed:{
    // 提示vuex中存入的用户详细资料
    targetuser(){
      return this.$store.getters.targetuser
    }
   },

以上方法有一个问题就是如果多人开发;会出现不利于管理,下面用一个方法定义一个常量

存储:

this.$store.dispatch('setuser',decode)

store.js

/**
 * 创建完文件后需要去到main.js中引入成全局
 */
import vue from "vue";
import vuex from "vuex";
// 持久存储插件
import createpersistedstate from "vuex-persistedstate";
 
//使用vuex
vue.use(vuex);
 
/**
 * 在需要多人协作的项目中,我们可以使用常量代替mutation 事件类型。这在各种 flux 实现中是很常见的模式。同时把这些常量放在单独的文件中可以让协作开发变得清晰。
 * 定义存储信息
 *
 *  */
 
const types = {
 set_target_user: "set_target_user" //详细资料
};
 
const state = {
 //用户初始化的状态
 targetuser: {} //用户详细资料数据
};
const getters = {
 //获取到用户状态,//实时监听state值的变化(最新状态)
 targetuser: state => state.targetuser
};
const mutations = {
 //自定义改变state初始值的方法
 
 [types.set_target_user](state, targetuser) {
  if (targetuser) {
   state.targetuser = targetuser; //如果targetuser有内容就赋给状态信息
  } else {
   //如果没内容就给targetuser赋空对象
   state.targetuser = {};
  }
 }
};
 
const actions = {
 //这里面的方法是用来异步触发mutations里面的方法,context与store 实例具有相同方法和属性
 setgargetuser({ commit }, targetuser) {
  commit(types.set_target_user, targetuser);
  // localstorage.setitem("set_target_user", json.stringify(targetuser));
 }
};
export default new vuex.store({
 state,
 mutations,
 getters,
 actions,
});

取值:

this.$store.getters.targetuser

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。