Vuex vue2.0

最新推荐文章于 2024-07-30 16:49:30 发布

安卓AndroidQ

最新推荐文章于 2024-07-30 16:49:30 发布

阅读量100

点赞数

文章标签：前端 javascript vue.js Powered by 金山文档

本文链接：https://blog.csdn.net/u011652925/article/details/128871279

版权

Vuex 是一个数据管理工具，我们可以通过它简化组件间的数据共享问题。

Vuex 的安装和使用方法。

使用 new Vuex.Store ({…}) 创建数据仓库。

Vuex 可以帮助我们管理共享状态，并附带了更多的概念和框架。这需要对短期和长期效益进行衡量。

如果您不打算开发大型单页应用，使用 Vuex 可能是繁琐冗余的。确实是如此 —— 如果您的应用够简单，您最好不要使用 Vuex。一个简单的 store 模式就足够您所需了。但是，如果您需要构建一个中大型单页应用，您很可能会考虑如何更好地在组件外部管理状态，Vuex 将会成为自然而然的选择。

基本示例

每一个 Vuex 应用的核心就是 store（仓库）。“store” 基本上就是一个容器，它包含着你的应用中大部分的状态 (state)。Vuex 和单纯的全局对象有以下两点不同：

Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。

你不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状态的变化，从而让我们能够实现一些工具帮助我们更好地了解我们的应用。最简单的 store:

实例演示

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div id="app">{{count}}</div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vuex@3.1.2/dist/vuex.js"></script>

<script type="text/javascript">
  const store = new Vuex.Store({
    state: {
      count: 12
    }
  })
  var vm = new Vue({
    el: '#app',
    created() {
      console.log(store.state.count)
    },
    computed: {
        count() {
            return store.state.count
        }
    }
  })
</script>
</html>

"运行案例" 可查看在线运行效果

代码解释在 JS 代码第 4-8 行，通过 new Vuex.Store ({…}) 创建数据仓库。在 JS 代码第 12 行，我们可以通过 store.state.count 访问仓库中定义的数据。

安卓AndroidQ

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vuex vue2.0

确实是如此 —— 如果您的应用够简单，您最好不要使用 Vuex。但是，如果您需要构建一个中大型单页应用，您很可能会考虑如何更好地在组件外部管理状态，Vuex 将会成为自然而然的选择。这样使得我们可以方便地跟踪每一个状态的变化，从而让我们能够实现一些工具帮助我们更好地了解我们的应用。}) 创建数据仓库。“store” 基本上就是一个容器，它包含着你的应用中大部分的状态 (state)。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。
复制链接

扫一扫