Vue技術點整理-Vuex

什麼是Vuex?

1，Vuex 是一個專爲 Vue.js 應用程序開發的狀態管理模式。它採用集中式存儲管理應用的全部組件的狀態，並以相應的規則保證狀態以一種可預測的方式發生變化
2，每個 Vuex 應用的核心就是 store（倉庫）。「store」基本上就是一個容器，它包含着你的應用中大部分的狀態 (state)
3，其實也就是，應用中各個組件之間共享狀態的一個狀態庫，並能夠時時映射到視圖

何時用的到Vuex?

1，若是你須要構建一個大中型應用的時候，會使用到不少組件嵌套，不少業務處理，此時須要是用Vuex更好地在組件外部管理全部的狀態。
2，若是你須要構建的應用是輕量的，則徹底沒有必要引入Vuex，使用簡單的 store 模式 或者組件之間的傳遞方式便可實現功能。

 

一，vue cli中簡單使用Vuex示例

1，state用法

注：main.js爲定義store的代碼，後面爲接收state的幾種方式

• main.js

import Vue from 'vue'
import Vuex from 'vuex'
import App from './App.vue'
import router from './router/'
Vue.use(Vuex)
const store = new Vuex.Store({
  namespaced: false,
  state: {
    title: '標題',
    backFlag: false
  },
  mutations: {
    updateTitle (state, title) {
      state.title = title
    },
    updateBackFlag (state, backFlag) {
      state.backFlag = backFlag
    }
  }
})
Vue.config.productionTip = false
new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

• 適合獲取狀態個數少的時候

<template>
  {{title}}
  {{backFlag}}
</template>

<script>
export default {
  name: "第一種接收方式",
  computed: {
    title () {
      return this.$store.state.title;
    },
    backFlag () {
      return this.$store.state.backFlag;
    }
  }
}
</script>

• 適合多個狀態的時候

<template>
  {{title}}
  {{backFlag}}
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: "第二種接收方式",
  computed: mapState({
    //'title',//此種方式也能夠獲取狀態
     title: state => state.title,
     backFlag: state => state.backFlag
  })
}
</script>

• 適合與局部計算屬性混合使用的時候

<template>
  {{title}}
  {{backFlag}}
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: "第三種接收方式",
  ...mapState({
    title: state => state.title,
    backFlag: state => state.backFlag
  })
}
</script>

 

2，Getter用法

注：Getter適用於狀態庫裏面的數據須要進行一遍過濾，或者狀態值須要依賴其餘狀態進行必定計算，此時可使用Getter方法，進行計算並返回

• 定義getter代碼：

const store = new Vuex.Store({
  namespaced: false,
  state: {
    todos: [
      { id: 1, text: '第一條', done: false },
      { id: 2, text: '第二條', done: false },
      { id: 3, text: '第三條', done: true }
    ]
  },
  mutations: {
    updateTodos (state, todos) {
      state.todos = todos
    }
  },
  getters: {
    //根據id值，查詢todos狀態庫裏的值
    getTodoById: (state) => (id) => {
       return state.todos.find(todo => todo.id === id)
    },
    //查詢todos狀態庫裏done爲true的值
    doneTodos: state => {
       return state.todos.filter(todo => todo.done)
    }
  }
})

 

• 接收getter代碼：

<template>
    <div>{{doneTodos}}</div>
</template>
<script>
import { mapState,mapGetters } from 'vuex'
export default {
  name: "test",
  computed: {
    //自動查詢doneTodos，爲賦值爲doneTodos
    ...mapGetters({
       doneTodos: 'doneTodos'
    })
  },
  mounted:function() {
     //查詢todos狀態庫裏done爲true的值
     console.info(this.$store.getters.doneTodos)
     //查詢todos狀態庫裏done爲true的值
     console.info(this.$store.getters.getTodoById(2))
  }
};
</script>
<style lang="less">
</style>

3，Mutation用法

注：更改 Vuex 的 store 中的狀態的惟一方法是提交 mutation，直接改變狀態，但Mutation必須是同步函數，如須要使用調用api等異步操做，請使用4 actions

• 定義Mutation代碼

const store = new Vuex.Store({
  namespaced: false,
  state: {
    title: '標題',
    backFlag: false
  },
  mutations: {
    updateTitle (state, title) {
      state.title = title
    },
    updateBackFlag (state, backFlag) {
      state.backFlag = backFlag
    }
  }
})

• 調用接收Mutation代碼

<template>
    <div>{{title}}</div>
</template>
<script>
import { mapState,mapMutations } from 'vuex'
export default {
  name: "test",
  computed: {
     //自動賦值title值
     ...mapState({
        title: state => state.title,
     })
  },
  mounted:function() {
     //第一種方法 動態更新title內容
     this.$store.commit('updateTitle',"騰訊_首頁")
        
     //第二種方法 動態更新title內容
     this.updateTitle('阿里_首頁')
  },
  methods: {
     // 將 `this.add()` 映射爲 `this.$store.commit('navbar/updateTitle')`
     ...mapMutations({
        updateTitle: 'updateTitle' 
     })
  }
};
</script>
<style lang="less">
</style>

 

4，Action的用法

注：Action 相似於 mutation，不一樣在於：

1. Action 提交的是 mutation，而不是直接變動狀態。
2. Action 能夠包含任意異步操做，可使用promise、await等處理異步調用

• 定義Action

import HttpService from '../../service/httpService.js';
const store = new Vuex.Store({
  namespaced: false,
  state: {
    title: '標題',
    backFlag: false
  },
  mutations: {
    updateTitle (state, title) {
      state.title = title
    },
    updateBackFlag (state, backFlag) {
      state.backFlag = backFlag
    }
  },
  actions: {
    updateTitleAsync (context,obj) {
      return new Promise((resolve, reject) => {
        let channelId = '001'
        HttpService.queryGoods(channelId)
            .then(data => {
                context.commit('updateTitle',obj.title)
                resolve()
            })
            .catch(error => {
                 console.info(error);
            });
     })
   }
  }
})

• 接收action代碼

<template>
    <div>{{title}}</div>
</template>
<script>
import { mapState,mapMutations,mapActions } from 'vuex'
export default {
   name: "test",
        //自動賦值title值
        ...mapState({
          title: state => state.title,
        })
   },
   mounted:function() {
        // this.updateTitleAsync("異步賦值,不關心返回值")
        this.updateTitleAsync({
            title: "異步賦值,切需當即使用返回值"
        }).then(() => {
            //console.info(context.backFlag)
            console.info(this.$store.state.title)
        })
    },
    methods: {
        // 將 `this.updateTitleAsync()` 映射爲 
      `this.$store.dispatch('increment')`
        ...mapActions({
          updateTitleAsync: 'updateTitleAsync' 
        })
    }
};
</script>
<style lang="less">
</style>

 

5，Module的用法

注：當應用比較複雜時，狀態比較多並難管理時，Vuex 容許咱們將 store 分割成模塊（module）

• 建立module模塊

const store new Vuex.Store({
  modules: {
        //navbar模塊：
        navbar: {
            namespaced: true,
            state: {
              title: '默認值',
              backFlag: false
            },
            mutations: {
              updateTitle (state, title) {
                state.title = title
              },
              updateBackFlag (state, backFlag) {
                state.backFlag = backFlag
              }
            }
       }
  }
})

• 如何接收使用模塊值，參考以下，加上模塊名稱便可

<template>
    <div>{{title}}</div>
</template>
<script>
import { mapState,mapMutations } from 'vuex'
export default {
  name: "test",
  computed: {
     //自動賦值title值
     ...mapState({
        title: state => state.navbar.title,
     })
  },
  mounted:function() {
     //第一種方法 動態更新title內容
     this.$store.commit('navbar/updateTitle',"騰訊_首頁")
        
     //第二種方法 動態更新title內容
     this.updateTitle('阿里_首頁')
  },
  methods: {
     // 將 `this.add()` 映射爲 `this.$store.commit('navbar/updateTitle')`
     ...mapMutations({
        updateTitle: 'navbar/updateTitle' 
     })
  }
};
</script>
<style lang="less">
</style>

 

GitHub示例地址 vue-ht-cli