Vuex狀態管理庫的簡單使用

官網：https://vuex.vuejs.org/zh/

爲什麼使用Vuex呢？以下是官方解釋：

對於問題一，傳參的方法對於多層嵌套的組件將會非常繁瑣，並且對於兄弟組件間的狀態傳遞無能爲力。
對於問題二，我們經常會採用父子組件直接引用或者通過事件來變更和同步狀態的多份拷貝。
以上的這些模式非常脆弱，通常會導致無法維護的代碼。

因此，我們爲什麼不把組件的共享狀態抽取出來，以一個全局單例模式管理呢？
在這種模式下，我們的組件樹構成了一個巨大的“視圖”，
不管在樹的哪個位置，任何組件都能獲取狀態或者觸發行爲！

通過定義和隔離狀態管理中的各種概念並通過強制規則維持視圖和狀態間的獨立性，
我們的代碼將會變得更結構化且易維護。

在App.vue中註冊兩個組件

<template>
  <div>
    <app-counter></app-counter>
    <app-result></app-result>
  </div>
</template>
 
<script>
import Result from "./result"
import Counter from "./Counter"
export default {
components:{
  'app-counter':Counter,
  'app-result':Result
 }
}
</script>

1.下載：(1).通過手腳架搭建，(2).自己下載

npm install vuex  --save

2.新建一個store.js文件

import Vue from "vue"
import Vuex from "vuex"

Vue.use(Vuex)

export default new Vuex.Store({
 state:{ //存儲中央數據的集合
   count:100
   }    

})

3.在main.js中去引入store.js

import store from "./store"

new Vue({
store,
render: h=> h(App),

}).$mount('#app')

4.在result.vue中怎麼獲取store裏面的值呢？

<template>
  <div>
    <p>結果是：{{ count }}</p>
  </div>
</template>
 
<script>

export default {
 computed:{//當count值改變時,該函數也會執行,保證count爲實時更新的狀態
  count(){
    return this.$store.state.count  //this.$store爲vuex的實例
   }
 }
</script>

5.怎麼在counter.vue中改變store裏面的值呢？

<template>
  <div>
    <button @click="increase">加</button>
    <button @click="deincrease">減</button>
  </div>
</template>
 
<script>

export default {
 methods:{
  increase(){
    this.$store.state.count++
   },
  deincrease(){
    this.$store.state.count--
   }

 }

}
</script>