vue 全局存储(store)

Posted 2021-01-20 studysuper

通过创建包含在组件之间共享数据存储的存储模式，可以实现一些简单的状态管理。
存储（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>