vuex的五個屬性及使用方法_vue應用程序狀態管理之超詳細vuex使用分析實戰案例...

本質上Vuex只做了一件事，就是Vue應用程序的狀態管理。 他有五個默認的基本的對象：

• state: [規定；聲明；陳述]。 他的作用就是聲明遍歷，存儲狀態數據，你不覺的他類似於Vue里的data嗎？
• getters: [獲得者；得到者]。 狀態(state)的計算屬性，對標Vue里的的computed 計算屬性。
• mutations[突變；變化；轉變]：這個單詞讓我想到了范海辛里的狼人和生化危機里的病變僵屍。他對標與Vue里的mothods方法，注意他的同步的。
• actions：[ 行動,動作] 需要注意的是他的異步的，很多數據獲取的工作，比如調用api接口都在這里完成。
• modules：store的子模塊，在開發大型項目的時候你一定會用的上。

 

1.在src文件夾里面新建一個文件夾，命名store，再在該store文件夾里面新建一個index.js文件。

2.在store文件夾里面index.js寫入如下內容

import Vue from 'vue';
import Vuex from 'vuex';


Vue.use(Vuex);


const store = new Vuex.Store({
  state:{
    count:1
  }
});

export default store;

3.在main.js文件引入剛剛創建的store文件

4.state的應用

4.1.方法1：直接在頁面引入this.$store.state.count

 

 

 4.2.方法2：通過computed方法來應用

5.mutations的應用

        

 

6.actions的應用

action 相似於 mutation，不一樣在於：

• action 提交的是 mutation，而不是直接變動狀態。
• action 能夠包含任意異步操做。

在 vuex 里面 actions 只是一個架構性的概念，並非必須的，本質上就是一個函數，你在里面想干嗎均可以，能夠經過異步方式執行各類任務，要修改state數據仍是須要經過commit觸發 mutation 。
能夠把mutation比做倉庫的管理員，負責倉庫管理，而把action比做領導，能夠命令倉庫管理員做操做，但不會親自動手。

     

6.1.action屬性的兩種寫法

6.1.1.普通寫法 

actions 的第一個參數是 context，它向外暴露一組與 store 實例相同的方法/屬性，因此能夠直接調用 context.commit 或者訪問 context.state 或者 context.getters 。

  actions:{
    aaddCount (context,n){
      context.commit('maddCount',n);
    }
  },

6.1.2.用es6的語法

使用 es6 的參數解構來簡化代碼，直接寫成{ commit }

  actions: {
    newMessage ({commit}, msg) {
      commit('NEW_MESSAGE', msg)
    }
  },

 

7.getters的應用

     

8.state、mutations、actions、getters四個屬性一起使用

 

 

文章參考---https://blog.csdn.net/weixin_39943678/article/details/111136332