Vuex的actions屬性的具體使用

2019-11-19 11:47:12

字體：大中小

來源：轉載

供稿：網友

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 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";//使用vuexVue.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"; //使用vuexVue.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,});

取值: