如何在Vuex中使用actions屬性

今天就跟大家聊聊有關(guān)如何在Vuex中使用actions屬性，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結(jié)了以下內(nèi)容，希望大家根據(jù)這篇文章可以有所收獲。

成都創(chuàng)新互聯(lián)公司基于成都重慶香港及美國等地區(qū)分布式IDC機房數(shù)據(jù)中心構(gòu)建的電信大帶寬，聯(lián)通大帶寬，移動大帶寬，多線BGP大帶寬租用,是為眾多客戶提供專業(yè)服務(wù)器托管報價，主機托管價格性價比高，為金融證券行業(yè)大邑服務(wù)器托管，ai人工智能服務(wù)器托管提供bgp線路100M獨享，G口帶寬及機柜租用的專業(yè)成都idc公司。

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 遞增函數(shù)。它是 ES6 語法，有三種狀態(tài)：

狀態(tài)	說明
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 方式

也可以使用普通回調(diào)來實現(xiàn)異步方案。

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 action和mutations的區(qū)別

action的功能和mutation是類似的，都是去變更store里的state，不過action和mutation有兩點不同：

1、action主要處理的是異步的操作，mutation必須同步執(zhí)行，而action就不受這樣的限制，也就是說action中我們既可以處理同步，也可以處理異步的操作

2、action改變狀態(tài)，最后是通過提交mutation

使用方式: 

安裝:

npm install vuex --save

引用:

store.js

方法一:

/**
 * 創(chuàng)建完文件后需要去到main.js中引入成全局
 */
import Vue from "vue";
import Vuex from "vuex";
//使用vuex
Vue.use(Vuex);
const state = {
 targetUser: {} //用戶詳細資料數(shù)據(jù)
};
 
const getters = {
 //獲取到用戶狀態(tài),//實時監(jiān)聽state值的變化(最新狀態(tài))
 targetUser: state => state.targetUser
};
 
const mutations = {
 //自定義改變state初始值的方法
 SET_TARGET_USER(state, targetUser) {
  if (targetUser) {
   state.targetUser = targetUser; //如果targetUser有內(nèi)容就賦給狀態(tài)信息
  } else {
   //如果沒內(nèi)容就給targetUser賦空對象
   state.targetUser = {};
  }
 }
};
 
const actions = {
 //這里面的方法是用來異步觸發(fā)mutations里面的方法,context與store 實例具有相同方法和屬性
 // 頁面定義的setGargetUser,targetUser為頁面?zhèn)鬟^來的值
 setGargetUser({ commit }, targetUser) {
  commit("SET_TARGET_USER", targetUser);
 }
};

存儲頁面:

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

獲取頁面:

 computed:{
    // 提示vuex中存入的用戶詳細資料
    targetUser(){
      return this.$store.getters.targetUser
    }
   },

以上方法有一個問題就是如果多人開發(fā);會出現(xiàn)不利于管理,下面用一個方法定義一個常量

存儲:

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

store.js

/**
 * 創(chuàng)建完文件后需要去到main.js中引入成全局
 */
import Vue from "vue";
import Vuex from "vuex";
// 持久存儲插件
import createPersistedState from "vuex-persistedstate";
 
//使用vuex
Vue.use(Vuex);
 
/**
 * 在需要多人協(xié)作的項目中，我們可以使用常量代替mutation 事件類型。這在各種 Flux 實現(xiàn)中是很常見的模式。同時把這些常量放在單獨的文件中可以讓協(xié)作開發(fā)變得清晰。
 * 定義存儲信息
 *
 *  */
 
const types = {
 SET_TARGET_USER: "SET_TARGET_USER" //詳細資料
};
 
const state = {
 //用戶初始化的狀態(tài)
 targetUser: {} //用戶詳細資料數(shù)據(jù)
};
const getters = {
 //獲取到用戶狀態(tài),//實時監(jiān)聽state值的變化(最新狀態(tài))
 targetUser: state => state.targetUser
};
const mutations = {
 //自定義改變state初始值的方法
 
 [types.SET_TARGET_USER](state, targetUser) {
  if (targetUser) {
   state.targetUser = targetUser; //如果targetUser有內(nèi)容就賦給狀態(tài)信息
  } else {
   //如果沒內(nèi)容就給targetUser賦空對象
   state.targetUser = {};
  }
 }
};
 
const actions = {
 //這里面的方法是用來異步觸發(fā)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

看完上述內(nèi)容，你們對如何在Vuex中使用actions屬性有進一步的了解嗎？如果還想了解更多知識或者相關(guān)內(nèi)容，請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝大家的支持。

當(dāng)前題目：如何在Vuex中使用actions屬性
URL地址：http://bm7419.com/article46/igceeg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供全網(wǎng)營銷推廣、App設(shè)計、網(wǎng)站收錄、企業(yè)建站、網(wǎng)站排名、網(wǎng)站維護

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)