vuex管理狀態(tài)倉庫詳解

2020-7-22 seo達(dá)人

一.什么是Vuex？

Vuex 是一個(gè)專為 Vue.js 應(yīng)用程序開發(fā)的狀態(tài)管理模式。它采用集中式存儲(chǔ)管理應(yīng)用的所有組件的狀態(tài)，并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測的方式發(fā)生變化。Vuex 也集成到 Vue 的官方調(diào)試工具 devtools extension，提供了諸如零配置的 time-travel 調(diào)試、狀態(tài)快照導(dǎo)入導(dǎo)出等高級調(diào)試功能。采用了全局單例模式，將組件的共享狀態(tài)抽離出來管理，使得組件樹中每一個(gè)位置都可以獲取共享的狀態(tài)或者觸發(fā)行為。
那么什么是狀態(tài)呢？我把狀態(tài)理解為在沒有使用vuex時(shí)，在當(dāng)前組件中data內(nèi)需要共用的數(shù)據(jù)為狀態(tài)。
vuex使得狀態(tài)或行為成為了共享的狀態(tài)，所共享的狀態(tài)或行為可以在各個(gè)組件中都可以訪問到，省去了子父或子子之間傳遞變量，提高了開發(fā)效率。

二.不使用vuex時(shí)與使用vuex時(shí)的差別

當(dāng)我們不使用vuex時(shí)，對于組件之間傳遞信息會(huì)較為麻煩。

不使用vuex時(shí)

父子之間傳遞信息：

App.vue文件中：

<template>
  <div id="app">
      <Fruits :fruitList="fruitList"/>
  </div>
</template> 
<script> import Goods from './components/Goods'; export default { name: 'App',
  components:{
    Fruits,
    Goods
  }, data(){
    return{ goodList:[
      {
        name:'doll',
        price:12 },
      { name:'glass',
        price:10 }
    ],
    }
  }
}
</script>
<style>
</style>

Good.vue文件中：

<template>
  <div class="hello">
      <ul>
        <li v-for="(good,index) in goodList" :key="index"> name:{{good.name}} number: {{good.number}} {{index}}
        </li>
      </ul>
  </div>
</template>

<script> export default { props:['goodList'],
}
</script>
<style>

</style>

兄弟之間傳遞信息：

首先先創(chuàng)建一個(gè)js文件作為兩兄弟之間傳輸?shù)募~扣，這里起名為msg.js

//創(chuàng)建并暴露vue import Vue from 'vue';
export default new Vue

兄弟組件Goods：

<template>
  <div>
        <button @click="deliver">點(diǎn)擊</button>
  </div>
</template>

<script> import MSG from '../msg';
export default {
  data(){ return{
      msg:'hahah' }
  },
  methods:{
    deliver() {
        MSG.$emit('showMsg',this.msg)
    }
  }

}
</script>
<style>

</style>

兄弟組件Fruits:

<template>
  <div>
      <div class="fruit">
          {{text}}
      </div>
  </div>
</template>
<script> import MSG from '../msg';
export default {
    data(){ return{
        text:'' }
    },
    created(){ this.getMsg()
    },
    methods:{
      getMsg(){
        MSG.$on('showMsg',(message)=>{ this.text = message
        })
      }
    }
}
</script>
<style>
</style>

在App組件中的代碼：
在這里插入圖片描述
點(diǎn)擊按鈕: