vuex使用詳解

Vuex的作用

1. 組件通信（兄弟組件）

2. 跨頁面通信

Vuex使用

創建vuex實例

vuex項目初始化后，src目錄會多一個store/index.js，里面會進行vuex的初始化

import Vue from 'vue'
import Vuex from 'vuex';
​
Vue.use(Vuex)
​
export default new Vuex.store({
  
  // 所有狀態
  state: {
    count: 0
 },
  
  
  // 計算屬性
  getters: {
          filterCount(state) {
             return state.count + 10;
         }
 },
  
  
  // 修改state
  mutations: {
          add (state, payload) { // payload是接收的參數
            // 只能使用同步操作
            state.count += payload;
​
            // 不能使用異步操作
            // setTimeout(()=>{
            //   state.count += payload;
            // }, 10000)
         },
          updateCount(state, payload){
             state.count = payload
         }
 },
  
  
  // 異步操作
  actions: {
          getCount({commit}, payload){
            console.log(payload); // 接收dispatch傳來的參數
​
            setTimeout(() => {
              const count = Math.ceil(Math.random()*10);
​
              // 修改state數據還是得觸發mutations
              commit('updateCount', count)
           }, 3000)
         }
 }
})

在main.js中導入store

import store from '@/store/index.js';
​
new Vue({
  store
})

訪問state中的數據

// store/index.js
state: {
    count: 0
},

// xxxx.vue
created(){
  console.log(this.$store) // 就是store實例對象
  console.log(this.$store.state.count) // 訪問state中的count
}

修改state中的數據 - mutations

通過commit觸發mutations中的方法

// xxxx.vue
methods: {
  handle(){
    
    // this.$store.state.count++; //這句話也能實現，但是不推薦這樣使用
    
    // 通過commit觸發mutations中的方法修改state
    this.$store.commit('add', 2)
 }
}

// store/index.js
mutations: {
    add (state, payload) { // payload是接收的參數
      // 只能使用同步操作
      state.count += payload;
      
      // 不能使用異步操作
      // setTimeout(()=>{
      //   state.count += payload;
      // }, 10000)
   },
},

 

mutations使用注意

• 不能直接修改state的數據：

  this.$store.state.count++; // 不能這樣使用

• 必須使用mutations修改state中的數據：

  • 通過mutations修改state的數據可以監測到state數據的變化

• mutations中不能寫異步方法修改state：

  • 為了防止state中的數據混亂（不可以監測到state數據的變化）

異步操作state中的數據 - actions

通過dispatch觸發actions中的方法

// xxxx.vue
created(){
  this.$store.dispatch('getCount', 123)
}

// store/index.js
  actions: {
    getCount({commit}, payload){
      console.log(payload); // 接收dispatch傳來的參數
      
      setTimeout(() => {
        const count = Math.ceil(Math.random()*10);
        
        // 修改state數據還是得觸發mutations
        commit('updateCount', count)
     }, 3000)
   }
 }

注意：在actions中要修改state還是要觸發mutations中的方法進行修改

getters計算屬性

// store/index.js
getters: {
    filterCount(state) {
       return state.count + 10;
   }
},

訪問計算屬性

// xxxx.vue
created(){
  console.log(this.$store.getters.filterCount) // 訪問getters中的count
}

上午總結

new Vuex.store({
  // 存儲的是所有的狀態
  state: { 
    count: 0
 },
  // 計算屬性
  getters: {
    filterCount(state) {
      return state.count + 10
   }
 },
  // 所有的修改state的方法
  mutations: {
    add(state, payload) {
      // payload是commit傳過來的第二個參數
      state.count++;
   },
    updateCount(state, payload) {
      // payload是commit傳過來的第二個參數
      state.count = payload;
   }
 },
  // 異步操作的方法
  actions: {
    getCount(context, payload) {
      // payload是dispatch傳過來的第二個參數
      const count = ajax('xxx');
      
      // 在actions中要修改state，還是要調用mutations中的方法
      context.commit('updateCount', count)
   }
 }
})

// xxx.vue
​
// 訪問state
this.$store.state.count // 0
// 觸發mutations中的方法
this.$store.commit('add', 2) 
// 訪問計算屬性
this.$store.getters.filterCount // 10
// 調用actions方法
this.$store.dispatch('getCount', "abcd")

操作vuex的第二種方法

mapState, mapMutations, mapGetters, mapActions

作用：在.vue組件中直接獲取vuex的狀態和方法

• 通過this.xxx獲取state和getters

• 通過this.xxx()調用mutations和actions

注意

1. mapState和mapGetters用法一樣

2. mapMutations和mapActions用法一樣

今日總結

1. state中存放什么數據?

// 存放所有的狀態
state: {
  a: 1,
  b:2
}

2. 讀取state中的數據

<div>{{{$store.state.a}}</div>

3. 修改state中的數據 - mutations

<button @click="add">+1</button>

methods: {
  add(){
    this.$store.commit('add', 2)
 }
}

// store
mutations: {
  add(state, payload) {
    // payload是commit傳的第二個參數
    state.a++;
 }
}

4. this.$store.state.a++?

可以達到效果，但是不建議使用，這種方法不能監聽到state的變化。

推薦還是使用mutations修改state

5. mutations的方法中可以進行異步操作嗎？

不可以。mutations異步操作不能監聽state的變化，會導致數據的混亂。

所以說mutations只能進行同步操作。

6. getters計算屬性

getters: {
  c(state, getters){
    return state.a + state.b
 }
}

7. 讀取getters計算屬性？

 // 跟讀取state格式一樣 
{{$store.getters.c}}

8. 在vuex中如何進行異步操作?

mutations: {
  updateA(state, payload) {
    state.a = payload
 }
},
actions: {
  getList(context, payload) { 
    setTimeout(() => {
      // 在actios中修改state的數據，還是要觸發mutations
      context.commit('updateA', 2)
   }, 3000)
 }
}

9. 如何調用actions中的方法

// xxx.vue
created(){
  this.$store.dispatch('getList', 123)
}

注意

• dispatch是觸發actions的

• commit是觸發mutations的

操作vuex的第二種方法

第一種方法

// xxx.vue
​
// 訪問state
this.$store.state.count // 0
// 觸發mutations中的方法
this.$store.commit('add', 2) 
// 訪問計算屬性
this.$store.getters.filterCount // 10
// 調用actions方法
this.$store.dispatch('getCount', "abcd")

第二種方法

mapState,mapMutations,mapGetters,mapActions

// xxx.vue中
import {mapState,mapMutations,mapGetters,mapActions} from 'vuex';
​
// 改寫this.$store.state.count
computed: {
  ...mapState(['count']) // 相當於當前組件中有個count計算屬性，可以通過this.count訪問
}
​
// 改寫this.$store.getters.filterCount
computed: {
  ...mapGetters(['filterCount']) // 相當於當前組件中有個filterCount計算屬性，可以通過this.filterCount訪問
}
​
// 改寫this.$store.commit('add', 2) 
methods: {
  ...mapMutations(['add']) // 就可以這樣調用了：this.add(2)
}
​
// 改寫this.$store.dispatch('getCount', "abcd")
methods: {
  ...mapActions(['getCount']) // 就可以這樣調用了：this.getCount("abcd")
}
​

mapState和mapGetters用法一致，都是放在computed里面

mapMutations和mapActions用法一致，都是放在methods里面

 

 

如果使用模塊化modules,使用方法為:

"m_cart ''為注冊在vuex實例中的模塊名

 

 

注:本文為轉載,非本人所寫