談談我對vuex的理解

vuex是解決vue組件和組件間相互通信而存在的，vuex理解起來稍微複雜，但一旦看懂則即為好用：

安裝：

npm install --save vuex

引入

import Vuex

console.log(Vuex) //Vuex为一个对象里面包含Vuex ={
    Store:function Store(){},    
    mapActions:function(){},    // 对应Actions的结果集mapGetters:function(){},    //对应Getters的结果集mapMutations:function(){},  //对应Mutations的结果集mapState:function(){},      //对应State的结果集install:function install(){}, //暂时不做讲解 installed:true //暂时不做讲解}//如果我们只需要里面的State时我们可以这样写import { mapState } from 'vuex';
import { mapGetters, mapMutations } from 'vuex'; //如果需要引用多个时用这种方式处理

引入

參數的介紹

State         儲存初始化資料

Getters      對State 裡面的資料二次處理（對資料進行過濾類似filter的作用）例如State返回的作為一個對象，我們想要取一個鍵的值用這個方法

Mutations   對資料進行計算的方法全部寫在裡面（類似computed） 在頁面中觸發時使用this.$store.commit('mutationName') 觸發Mutations方法改變state的值

Actions   ut  處理Mations中已經寫好的方法其直接觸發方式是this.$store.dispatch(actionName)

我們先不急著了解更多先打印下Vuex

//store为实例化生成的import store from './store' new Vue({
  el: '#app',
  store,
  render: h => h(App)
})

反复看上面的內容是不是就豁然開朗了接下來我們進行依序舉例和用官方的語言描述

State

State負責儲存整個應用的狀態數據，一般需要在使用的時候在跟節點注入store對象，後期就可以使用this.$store.state直接獲取狀態

//./store文件const store = new Vuex.Store({
  state: {   //放置state的值
    count: 0,
    strLength:"abcd234"
  },
  getters: {   //放置getters方法
      strLength: state => state.aString.length
  },
  mutations: {   //放置mutations方法
       mutationName(state) {          //在这里改变state中的数据  state.count = 100;
       }
  },  // 异步的数据操作  actions: {      //放置actions方法
       actionName({ commit }) {          //dosomething commit('mutationName')
      },
      getSong ({commit}, id) {
          api.getMusicUrlResource(id).then(res => {
            let url = res.data.data[0].url;
        
          })
          .catch((error) => {  // 错误处理              console.log(error);
          });
      }
  }
});
export default store;

這個store可以理解為一個容器，包含著應用中的state等。實例化產生store的過程是：　　

import {mapState} from 'vuex'export default {  //组件中
  computed: mapState({
    count: state => state.count
  })
}

後續在組件中使用的過程中，如果想要獲取對應的狀態你就可以直接使用this.$store.state獲取，當然，也可以利用vuex提供的mapState輔助函數將state對應到計算屬性中去，如

import {mapGetters} from 'vuex'export default {  
computed: mapGetters(['strLength'])
}

Getters

有些狀態需要做二次處理，就可以使用getters。透過this.$store.getters.valueName對派生出來的狀態進行存取。或直接使用輔助函數mapGetters將其映射到本地計算屬性中去。

在組件中使用方式

export default {
  methods: {
    handleClick() {      this.$store.commit('mutationName')
    }
  }
}

Mutations

Mutations的中文意思是“變化”，利用它可以更改狀態，本質就是用來處理數據的函數，其接收唯一參數值state。 store.commit(mutationName)是用來觸發一個mutation的方法。需要記住的是，定義的mutation必須是同步函數，否則devtool中的資料將可能出現問題，使狀態改變變得難以追蹤。

在元件中觸發：

import {mapMutations} from 'vuex'export default {
  methods: mapMutations(['mutationName'
  ])
}

或使用輔助函數mapMutations直接將觸發函數對應到methods上，這樣就能在元素事件綁定上直接使用了。如：

import {mapActions} from 'vuex'//我是一个组件export default {
  methods: mapActions(['actionName',
  ])
}

Actions

Actions也可以用來改變狀態，不過是透過觸發mutation實現的，重要的是可以包含非同步操作。其輔助函數是mapActions與mapMutations類似，也是綁定在元件的methods上的。如果選擇直接觸發的話，使用this.$store.dispatch(actionName)方法。

在組件中使用

//写在./store文件中import createLogger from 'vuex/dist/logger'const store = Vuex.Store({
  ...
  plugins: [createLogger()]
})

 Plugins

插件就是一個鉤子函數，在初始化store的時候引入即可。比較常用的是內建的logger插件，用於作為調試使用。

rrreee🎜🎜 🎜

以上是談談我對vuex的理解的詳細內容。更多資訊請關注PHP中文網其他相關文章！