首页 > 其他 > 详细

vue 全局存储(store)

时间:2018-11-16 19:47:38      阅读:453      评论:0      收藏:0      [点我收藏+]

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

原文:https://www.cnblogs.com/studysuper/p/9971063.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!