淺談Vuex的狀態管理(全家桶)

2019-11-19 14:59:44

字體：大中小

來源：轉載

供稿：網友

Vuex 是一個專為 Vue.js 應用程序開發的狀態管理模式。它采用集中式存儲管理應用的所有組件的狀態，并以相應的規則保證狀態以一種可預測的方式發生變化。Vuex 也集成到 Vue 的官方調試工具 devtools extension，提供了諸如零配置的 time-travel 調試、狀態快照導入導出等高級調試功能。

以上是vuex的官方文檔對vuex的介紹，官方文檔對vuex的用法進行了詳細的說明。這里就不再細講vuex的各個用法，寫這篇博客的目的只是幫助部分同學更快地理解并上手vuex。

1. 安裝

$ npm install vuex --save

2. 在main.js 主入口js里面引用store.js

import Vue from 'vue'import App from './App'import router from './router' import store from './vuex/store'  //引用store.jsVue.config.productionTip = false //阻止在啟動時生成生產提示 //vue實例new Vue({ el: '#app', router, store,              //把store掛在到vue的實例下面 template: '<App/>', components: { App }})

3. 在store.js里引用Vuex

import Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex) //注冊Vuex// 定義常量  如果訪問他的話，就叫訪問狀態對象const state = {  count: 1}// mutations用來改變store狀態, 如果訪問他的話，就叫訪問觸發狀態const mutations = {  //這里面的方法是用 this.$store.commit('jia') 來觸發  jia(state){    state.count ++  },  jian(state){    state.count --  },}//暴露到外面，讓其他地方的引用export default new Vuex.Store({  state,  mutations})

4. 在vue組件中使用

使用$store.commit('jia')區觸發mutations下面的加減方法

<template> <div class="hello">   <h1>Hello Vuex</h1>   <h5>{{$store.state.count}}</h5>   <p>    <button @click="$store.commit('jia')">+</button>    <button @click="$store.commit('jian')">-</button>   </p> </div></template><!-- 加上scoped是css只在這個組件里面生效，為了不影響全局樣式 --><style scoped>  h5{   font-size: 20px;   color: red;  }</style>

5. 查看演示

6. state訪問狀態對象

使用computed計算

<template> <div class="hello">   <h1>Hello Vuex</h1>   <h5>{{count}}</h5>   <p>    <button @click="$store.commit('jia')">+</button>    <button @click="$store.commit('jian')">-</button>   </p> </div></template><script>import {mapState} from 'vuex'export default{  name:'hello', //寫上name的作用是，如果你頁面報錯了，他會提示你是那個頁面報的錯，很實用  // 方法一  // computed: {  //  count(){  //   return this.$store.state.count + 6  //  }  // }    // 方法二 需要引入外部 mapState  computed:mapState({   count:state => state.count + 10  })   // ECMA5用法  // computed:mapState({  //  count:function(state){  //   return state.count  //  }  // })    //方法三  // computed: mapState([  //  'count'  // ]) }</script>

7. mutations觸發狀態（同步狀態）

<template> <div class="hello">   <h1>Hello Vuex</h1>   <h5>{{count}}</h5>   <p>    <button @click="jia">+</button>    <button @click="jian">-</button>   </p> </div></template><script>import {mapState,mapMutations} from 'vuex' export default{  name:'hello', //寫上name的作用是，如果你頁面報錯了，他會提示你是那個頁面報的錯，很實用  //方法三  computed: mapState([   'count'  ]),  methods:{   ...mapMutations([     'jia',     'jian'   ])  } }</script>

8. getters計算屬性

getter不能使用箭頭函數，會改變this的指向

在store.js添加getters

// 計算const getters = {  count(state){    return state.count + 66  }}export default new Vuex.Store({  state,  mutations,  getters})//count的參數就是上面定義的state對象//getters中定義的方法名稱和組件中使用的時候一定是一致的,定義的是count方法，使用的時候也用count，保持一致。組件中使用<script> import {mapState,mapMutations,mapGetters} from 'vuex' export default{  name:'hello',  computed: {   ...mapState([    'count'   ]),   ...mapGetters([    'count'   ])  },  methods:{   ...mapMutations([     'jia',     'jian'   ])  } }</script>

9. actions (異步狀態)

在store.js添加actions

import Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)// 定義常量const state = {  count: 1}// mutations用來改變store狀態 同步狀態const mutations = {  jia(state){    state.count ++  },  jian(state){    state.count --  },}// 計算屬性const getters = {  count(state){    return state.count + 66  }}// 異步狀態const actions = {  jiaplus(context){    context.commit('jia') //調用mutations下面的方法    setTimeout(()=>{      context.commit('jian')    },2000)    alert('我先被執行了，然后兩秒后調用jian的方法')  },  jianplus(context){    context.commit('jian')  }}export default new Vuex.Store({  state,  mutations,  getters,  actions})

在組件中使用

<template> <div class="hello">   <h1>Hello Vuex</h1>   <h5>{{count}}</h5>   <p>    <button @click="jia">+</button>    <button @click="jian">-</button>   </p>   <p>    <button @click="jiaplus">+plus</button>    <button @click="jianplus">-plus</button>   </p> </div></template><script> import {mapState,mapMutations,mapGetters,mapActions} from 'vuex' export default{  name:'hello',  computed: {   ...mapState([    'count'   ]),   ...mapGetters([    'count'   ])  },  methods:{   // 這里是數組的方式觸發方法   ...mapMutations([     'jia',     'jian'   ]),   // 換一中方式觸發方法 用對象的方式   ...mapActions({    jiaplus: 'jiaplus',    jianplus: 'jianplus'   })  } }</script><style scoped>  h5{   font-size: 20px;   color: red;  }</style>

10. modules 模塊

適用于非常大的項目，且狀態很多的情況下使用，便于管理

修改store.js

import Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)const state = {  count: 1}const mutations = {  jia(state){    state.count ++  },  jian(state){    state.count --  },}const getters = {  count(state){    return state.count + 66  }}const actions = {  jiaplus(context){    context.commit('jia') //調用mutations下面的方法    setTimeout(()=>{      context.commit('jian')    },2000)    alert('我先被執行了，然后兩秒后調用jian的方法')  },  jianplus(context){    context.commit('jian')  }}//module使用模塊組的方式 moduleAconst moduleA = {  state,  mutations,  getters,  actions}// 模塊B moduleBconst moduleB = {  state: {    count:108  }}export default new Vuex.Store({  modules: {    a: moduleA,    b: moduleB,  }})