https://vuex.vuejs.org/zh-cn

state --> view --> action -> state

多組件共享狀態， 之前操作方式，由父組件傳遞到各個子組件。 當路由等加入後，會變得復雜。 引入viewx 解決共享問題。

安裝

npm install --save vuex

代碼1 ：原vue實現計數器

app.uve

<template>
<div>
  <p>點擊次數{{count}}， 奇偶數:{{eventOrOdd}}</p>
  <button @click="increment
 
">+</button>
  <button @click="decrement">-</button>
  <button @click="incrementIfOdd">奇數加</button>
  <button @click="incrementAsync">異步加</button>
</div>
</template>

<script>
export default {
  data () {
    return {
      count: 0
    }
  },
  computed: {
    eventOrOdd () {
      
 
return this.count % 2 === 0 ? ‘偶數‘ : ‘奇數‘
    }
  },
  methods: {
    increment () {
      const count = this.count
      this.count = count + 1
    },
    decrement () {
      const count = this.count
      this.count = count - 1
    },
    incrementIfOdd () {
      const count = this.count
      if
 
 (count % 2 === 1) {
        this.count = count + 1
      }
    },
    incrementAsync () {
      setTimeout(() => {
        const count = this.count
        this.count = count + 1
      }, 1000)
    }
  }
}
</script>

<style>

</style>

代碼2：

vue part5 vuex