通過創建包含在組件之間共享數據存儲的存儲模式，可以實現一些簡單的狀態管理。
存儲（Store）可以管理應用程序的狀態以及負責更改狀態的方法。

//定義 Store 儲存

export const stroe = {
  state: {
    numbers: [1, 2, 3]
  },
  addNumber(newNumber) {
    this.state.numbers.push(newNumber)
  }
}

//定義 Display 儲存

<template>
  <div>
    <h4>{{stroeNumber}}</h4>
  </div>
</template>
<script>
import { stroe } from ‘./Store.js‘
export default {
  data() {
    return {
      stroeNumber: stroe.state.numbers
    }
  }
}
</script>
<style scoped>
</style>
 

//定義 Submit 儲存

<template>
  <div>
    <input type="text" name="" id="" v-model="number">
    <button @click="addNumber(number)">add number</button>
  </div>
</template>
<script>
import { stroe } from "./Store.js";
export default {
  data() {
    return {
      number: ""
    }
  },
  methods: {
    addNumber(number) {
      stroe.addNumber(Number(number))
      this.number = ‘‘
    }
  }
}
</script>
<style scoped>
</style>

 

vue 全局存儲(store)