如何調用vuex中的方法

『壹』 vuex的幾種調用方法

就是子組件給自己加的一把鎖，不讓父組件輕易的訪問進來

第一種： 直接調用

第二種： 輔助函數

第三種： 僅做了解

第四種：輔助函數的 升級版

『貳』 vuex 數據管理,組件A如何調用組件B的方法

應該兄戚把方法羨脊陵發在vuex中的mutations中 在任意組野帶件都可以使用this.$store.commit(mutation,參入的參數)進行訪問

『叄』 VUE-X 輔助函數用法及分模塊使用vuex

1.VUE-X輔助函數用法：

App.vue內容：

<template>

  <div id="app">

    <h1>{{num}}</h1>

    <button @click="addNumber">增加</button> |

    <button @click="delNumber">減少</button> |

    <button @click="ajaxfn">非同步加</button> |

  </div>

</template>

<script>

/* 導出vuex中的 mapState 方法*/

import { mapState,mapGetters, mapMutations,mapActions} from 'vuex'

export default {

  name:"App",

  computed:{

    /*  */

    ...mapState(['num']),

    ...mapGetters(['getDaZhuan','getBenKe'])

  },

  methods: {

    /* 利用mapMutations方法使用拓展運算符把Mutations的方法解構在methods中 */

    /* 在this中也可以找到對應解構出來的方法 */

    /* ...mapMutations(['ADDNUM','DELNUM']), */

    /* 如果Mutations中的方法和methods中同名了,可以採用對象形式修改 */

    ...mapMutations({

      addfn:'ADDNUM',

      delfn:'DELNUM'

    }),

    /* 類似於下面 */

    /* ADDNUM:function(){...}

    DELNUM:function(){...} */

    addNumber(){

      /* this.$store.commit('ADDNUM',2) */

      /* this.ADDNUM(2) */

      this.addfn(2)

    },

    delNumber(){

      /* this.$store.commit('DELNUM',2) */

      /* this.DELNUM(2) */

      this.delfn(2)

    },

    ADDNUM(){

      console.log(2);

    },

    /* 利用mapActions方法使用拓展運算符把Actions的方派模法解構在methods中 */

    /* 在this中也可以找到對應解構塵賣緩出來的方法 */

    /* ...mapActions(['addajax']), */

    /* 如果Actions中的方法和methods中配巧同名了,可以採用對象形式修改 */

    ...mapActions({

    addajax2:'addajax'

    }),

    ajaxfn(){

     this.addajax(5)

    },

    addajax(){

     this.addajax2(5)

    }

  },

}

</script>

<style>

</style>

store下index.js內容：

/* import { set } from 'core-js/core/dict'; */

import Vue from 'vue'

import Vuex from 'vuex'

Vue.use(Vuex)

/* Vuex 是一個專為 Vue.js 應用程序開發的狀態管理模式 + 庫。

它採用集中式存儲管理應用的所有組件的狀態，

並以相應的規則保證狀態以一種可預測的方式發生變化。 */

/* 如果需要構建一個中單行單頁應用,灰考慮如何更好的在組件外部管理狀態,

   Vuex將會成為自然而然的選擇 */

/* 導出一個Vuex實例化對象 */

export default new Vuex.Store({

  /* state是用來存儲組件中的數據的 */

  state: {

    msg: '我是組件共享的數據',

    num: 0,

    list: [{

        "title": "某xxxx去了學校1",

        "dec": "xxxxxxx學習了vue學習了java",

        "xueli": "大專"

      },

      {

        "title": "某xxxx去了學校2",

        "dec": "xxxxxxx學習了vue學習了javaScript",

        "xueli": "大專"

      },

      {

        "title": "某xxxx去了學校3",

        "dec": "xxxxxxx學習了vue學習了雲計算",

        "xueli": "大專"

      },

      {

        "title": "某xxxx去了學校4",

        "dec": "xxxxxxx學習了vue學習了前端",

        "xueli": "本科"

      },

      {

        "title": "某xxxx去了學校5",

        "dec": "xxxxxxx學習了vue學習了後端",

        "xueli": "本科"

      },

      {

        "title": "某xxxx去了學校6",

        "dec": "xxxxxxx學習了vue學習了大數據",

        "xueli": "本科"

      }

    ]

  },

  /* getters計算組件中的數據的,可以對數據進行二次加工類似於computer功能 */

  /* 類似於計算屬性 */

  getters: {

    /* 計算大專學歷的數據 */

    getDaZhuan: function (state) {

      return state.list.filter(r => r.xueli == '大專')

    },

    /* 計算本科學歷的數據 */

    getBenKe: function (state) {

      return state.list.filter(r => r.xueli == '本科')

    },

    /* 說明也具有緩存功能 如果state中的數據得到了改變

        那麼getters中的屬性也會發生改變,如果state的值沒有發生任何變化,那麼getters

        中的屬性的值就不會發生改變*/

    getRandom:function(state){

       return state.num +'--'+ Math.random()

    }

  },

  /* 在mutations中修改state中的值(修改state中的值要想留下記錄必須用mutations修改) */

  mutations: {

    /* 在mutations裡面寫非同步就會造成數據混亂的問題 */

    /* mutations 的方法最好大寫,為了和actions方法做區分 */

    /* mutations 通過payload來獲取 */

    ADDNUM: function (state, payload) {

      console.log('ADDNUM', state);

      /* 模擬後台獲取數組的非同步場景 */

      /* setTimeout(()=>{

        state.num+=payload

      },500) */

      /* state.num++ */

      state.num += payload

    },

    DELNUM: function (state, payload) {

      console.log('DELDNUM', state);

      /* state.num-- */

      state.num -= payload

    },

  },

  /* actions是用來調後台介面的並commit提交一個mutations */

  actions: {

    /* actions裡面的方法小寫為了區分mutations裡面的方法 */

    /* 非同步請求要放 actions 裡面去寫 不要放組件寫*/

    addajax: function ({

      commit

    }, data) {

      setTimeout(() => {

        /* 使用解構出來的commit方法來提交一個mutations方法ADDNUM來修改state中的值 */

        commit('ADDNUM', data)

      }, 500)

    },

    delajax: function ({

      commit

    }, data) {

      setTimeout(() => {

        /* 使用解構出來的commit方法來提交一個mutations方法ADDNUM來修改state中的值 */

        commit('DELNUM', data)

      }, 500)

    },

  },

  /* 可以使用moles把vuex分模塊 */

  moles: {}

})

2.分模塊使用vuex：

app.vue內容：

<template>

  <div id="app">

    <h1>{{$store.state.modA.modaStr}}</h1>

    <h1>{{$store.state.modB.modbStr}}</h1>

    <h1>{{$store.getters['modA/strGetter']}}</h1>

    <button @click="changeStr">修改modaStr的值</button>

    <button @click="waitchange">非同步修改modaStr的值</button>

  </div>

</template>

<script>

export default {

  name:"App",

  created(){

    console.log(this);

  },

  methods:{

    changeStr(){

      this.$store.commit('modA/CHANGESTR','堅持學VUE啊')

    },

    waitchange(){

      this.$store.dispatch('modA/waitfnStr','堅持學前端啊')

    }

  }

  }

</script>

<style>

</style>

store新建moles文件創建ModA.js文件：

/* 模塊的局部狀態 */

/* 箭頭函數如果想返回對象需要使用()包一下不能直接返回{} */

const state = ()=>({

    modaStr:'我是模塊A的數據'

  })

  /* getters計算組件中的數據的,可以對數據進行二次加工類似於computer功能 */

  /* 類似於計算屬性 */

  const getters= {

    strGetter:function(state){

        console.log(state);

      return state.modaStr + 'getter'

    }

  }

  /* 在mutations中修改state中的值(修改state中的值要想留下記錄必須用mutations修改) */

  const mutations= {

   CHANGESTR(state,payload){

    state.modaStr = payload

   }

  }

  /* actions是用來調後台介面的並commit提交一個mutations */

  const  actions= {

    waitfnStr({commit},data){

        setTimeout(()=>{

            commit('CHANGESTR',data)

        },1000)

    }

  }

  /* 可以使用moles把vuex分模塊 */

  const moles={

  }

  export default {

      /* 保證模塊之間的數據獨立運行,不互相影響 */

      namespaced:true,

      state,

      getters,

      mutations,

      actions,

      moles

  }

store新建moles文件創建ModB.js文件：

const state = ()=>({

    modbStr:'我是模塊B的數據'

  })

/* getters計算組件中的數據的,可以對數據進行二次加工類似於computer功能 */

/* 類似於計算屬性 */

const getters= {

}

/* 在mutations中修改state中的值(修改state中的值要想留下記錄必須用mutations修改) */

const mutations= {

}

/* actions是用來調後台介面的並commit提交一個mutations */

const  actions= {

}

/* 可以使用moles把vuex分模塊 */

const moles={

}

export default {

    /* 保證模塊之間的數據獨立運行,不互相影響 */

    namespaced:true,

    state,

    getters,

    mutations,

    actions,

    moles

}

store下index.js文件：

/* import { set } from 'core-js/core/dict'; */

import Vue from 'vue'

import Vuex from 'vuex'

/* 先把各個模塊導入進來 */

import modA from '@/store/moles/ModA.js'

import modB from '@/store/moles/ModB.js'

Vue.use(Vuex)

/* Vuex 是一個專為 Vue.js 應用程序開發的狀態管理模式 + 庫。

它採用集中式存儲管理應用的所有組件的狀態，

並以相應的規則保證狀態以一種可預測的方式發生變化。 */

/* 如果需要構建一個中單行單頁應用,灰考慮如何更好的在組件外部管理狀態,

   Vuex將會成為自然而然的選擇 */

/* 導出一個Vuex實例化對象 */

export default new Vuex.Store({

  /* state是用來存儲組件中的數據的 */

  state: {

  },

  /* getters計算組件中的數據的,可以對數據進行二次加工類似於computer功能 */

  /* 類似於計算屬性 */

  getters: {

  },

  /* 在mutations中修改state中的值(修改state中的值要想留下記錄必須用mutations修改) */

  mutations: {

  },

  /* actions是用來調後台介面的並commit提交一個mutations */

  actions: {

  },

  /* 可以使用moles把vuex分模塊 */

  /* 分模塊實現數據集中管理 */

  /* 在 moles 中把模塊名注釋一下*/

  moles: {

   modA:modA,

   modB:modB

  }

})

『肆』 Vuex簡單使用

Vuex 是一個專為 Vue.js 應用程序開發的狀態管理模式。它採用集中式存儲管理應用的所有組件的狀態，並以相應的規則保證狀態以一種可預測的方式發生變化。
如果一份數據需要在多個組件中使用，組件間傳值又比較復雜，就可以使用vuex託管數據。

state選項： 定義狀態（狀態就是數據）。
mutations選項： 定義修改狀態的方法（注意：這裡面只能定義同步方法）。

$store： 返回的是當前項目中的全局狀態對象。
commit()方法： 用於執行指定的mutations裡面的方法。

在組件中，直接通過$store.state就可以獲取到全局狀態對象管理的狀態數據，直接渲染到頁面。

state選項： 定義狀態（狀態就是數據）。

通過 $store.state.數據名 使用。

getters選項： 定義計算屬性。方法的參數是狀態對象。

通過 $store.getters.屬性名 使用計算屬性。

mutations選項： 定義修改狀態的方法（注意：這里的方法一般都是同步方法）。方法的第一個參數是狀態對象，第二個參數是新值。

通過 commit() 方法，調用mutations裡面的方法。

actions選項： 定義操作狀態的方法（這里的方法可以定義非同步方法）。
注意： actions里的方法最好不要直接操作state狀態，而是通過調用mutations裡面的方法去修改狀態。所以，actions直接操作的是mutations。

通過 dispatch() 方法，調用actions裡面定義的方法。

由於使用單一狀態樹，應用的所有狀態會集中到一個比較大的對象。當應用變得非常復雜時，store 對象就有可能變得相當臃腫。
為了解決以上問題，Vuex 允許我們將 store 分割成模塊（mole）。每個模塊擁有自己的 state、mutation、action、getter、甚至是嵌套子模塊。

namespaced屬性： 默認情況下，action、mutation 和 getter 是注冊在全局命名空間的。通過設置namespaced屬性為true，將action、mutation 和 getter全部注冊到私有命名空間中。

要從私有模塊中獲取數據，方式是： $store.state.模塊名稱.模塊的數據 。

要從私有模塊中獲取計算屬性，方式是： $store.getters['模塊名/計算屬性'] 。

調用私有模塊裡面的mutations定義的方法，方式是： $store.commit('模塊名/方法名',新值) 。

調用私有模塊裡面的actions定義的方法，方式是： $store.dispatch('模塊名/方法名',新值) 。

直接在模板中使用全局狀態管理數據，表達式會寫的很長。所以可以使用計算屬性。

通過映射函數mapState、mapGetters、mapActions、mapMutations，可以將vuex.store中的屬性映射到vue實例身上，這樣在vue實例中就能訪問vuex.store中的屬性了，便於操作vuex.store。

如果vuex裡面state的數據名稱 跟 頁面中的計算屬性名稱相同，就可以使用 mapState 映射函數，自動生成頁面中的計算屬性。
如果vuex裡面getters的數據名稱 跟 頁面中的計算屬性名稱相同，就可以使用 mapGetters 映射函數，自動生成頁面中的計算屬性。
注意： 如果要映射模塊裡面的state/getters，函數的第一個參數設置為模塊的名稱。

如果定義的方法名跟全局管理對象中mutations裡面的方法名相同，並且定義的方法會帶有一個參數，通過參數傳遞數據。滿足該規則，就可以使用 mapMutations 映射函數生成方法。
如果定義的方法名跟全局管理對象中actions裡面的方法名相同，並且定義的方法會帶有一個參數，通過參數傳遞數據。滿足該規則，就可以使用 mapActions 映射函數生成方法。
注意： 如果要映射私有模塊中mutations/actions裡面的方法，函數的第一個參數設置為模塊的名稱。

『伍』 Vuex的使用及組件通信方式

Vuex是通過全局注入store對象，來實現組件間的狀態共享。在大型復雜的項目中（多級組件嵌套），需要實現一個組件更改某個數據，多個組件自動獲取更改後的數據進行業務邏輯處理，這時候使用vuex比較合適。假如只是多個組件間傳遞數據，使用vuex未免有點大材小用，其實只用使用組件間常用的通信方法即可。

Vue組件簡單常用的通信方式有以下幾種：
1、父子通信：父向子傳值，兆配通過props；子向父傳值通過配猜舉events ($emit)；父調用子方法通過ref；provide / inject。
2、兄弟通信：bus
3、跨級嵌套通信：bus；provide / inject等。

Vuex有培碧以下幾個部分構成：
1）state
state是存儲的單一狀態，是存儲的基本數據。

2）Getters
getters是store的計算屬性，對state的加工，是派生出來的數據。就像computed計算屬性一樣，getter返回的值會根據它的依賴被緩存起來，且只有當它的依賴值發生改變才會被重新計算。

3）Mutations
mutations提交更改數據，使用store.commit方法更改state存儲的狀態。（mutations同步函數）

4）Actions
actions像一個裝飾器，提交mutation，而不是直接變更狀態。（actions可以包含任何非同步操作）

5）Mole
Mole是store分割的模塊，每個模塊擁有自己的state、getters、mutations、actions。

const moleA = {
state: { ... },
mutations: { ... },
actions: { ... },
getters: { ... }
}

const moleB = {
state: { ... },
mutations: { ... },
actions: { ... }
}

const store = new Vuex.Store({
moles: {
a: moleA,
b: moleB
}
})

store.state.a // -> moleA 的狀態
store.state.b // -> moleB 的狀態

觸發非同步請求操作：
this.$store.dispatch('reqHomeData')

actions中：
async reqHomeData({ commit }) {
const result = await server.getHomeData();
commit(GET_HOME_DATA, { homeList: result })
},

mutations中：
[GET_HOME_DATA](state, { homeList }) {
state.homeList = homeList
},

『陸』 vuex 調用方法總結

1.在vue組件裡面引用：埋賀

import {mapState, mapGetters, mapMutations, mapActions}

mapState:   computed屬性裡面 聲明

mapGetters:  computed屬性裡面 聲明

mapMutations: methods屬性裡面 聲明

mapActions: methods屬性裡面 聲明

2.在js直接調用state：

import store from '@/store';

const { crmToken, userInfo } = store.state;---------調用灶激state

store.dispatch('setLogout'); --------調用actions方法

store.commit('SET_ERR_MSG', errMsg);-----調用方法

3.vuex 引入element-ui 並使用

import{ Message 隱液襪} from 'element-ui';

Message.error({

    message: s.errMsg,

    onClose: () => {

        s.showErrorMsg = false;

    },

});

『柒』 vuex的五個屬性及使用方法

vuex的五個屬性及使用方法如下：

基本屬性：

1. state：vuex的基本數據，用來存儲變數

2. geeter：從基本數據(state)派生的數據，相當於state的計算屬性

3. mutation：提交更新數據的方法，必須是同步的(如果需要非同步使用action)。每個 mutation 都有一個字元串的 事件類型 (type) 和 一個 回調函數 (handler)。

Vuex的用法：

新建vue項目testApp ==》 在testApp中建store文件 ==》 store文件下又有moles文件夾和getter.js 和 index.js ==》 store文件下建user.js

在項目的main.js中引入 import store from './store'

在store文件下的index.js中引入