Vue.js 是一种流行的前端框架，它能够帮助开发者快速构建交互式的用户界面。在 Vue.js 中，数据存储是一个非常重要的方面，因为它允许我们在应用中保存和管理数据。在本文中，我们将介绍 Vue.js 中数据存储的基础知识，包括如何使用组件和 Vuex 状态管理库来实现数据存储。
组件中的数据存储
在 Vue.js 中，组件是构建用户界面的基本单元。每个组件都有自己的状态和行为，这些状态和行为可以通过组件的属性和方法来访问。组件中的数据存储通常使用组件的状态来实现。组件状态是一个包含数据的对象，它可以在组件中被访问和修改。
定义组件状态
要定义组件状态，我们需要在组件的选项中添加一个名为 data 的函数。这个函数返回一个包含组件状态的对象。例如，下面是一个简单的组件，它包含一个名为 count 的状态：
Vue.component('counter', {
data: function () {
return {
count: 0
}
},
template: '<button v-on:click="count++">{{ count }}</button>'
})在这个示例中，我们定义了一个名为 counter 的组件。它有一个 data 函数，它返回一个包含 count 属性的对象。我们还定义了一个模板，它包含一个按钮，当用户点击按钮时，count 属性的值将增加。
访问组件状态
要访问组件状态，我们可以使用 this 关键字在组件的方法和模板中引用它。例如，下面是一个简单的组件，它使用计算属性来计算 count 的平方：
-- -------------------- ---- -------
------------------------ -
----- -------- -- -
------ -
------ -
-
--
--------- -
-------- -------- -- -
------ ---------- - ----------
-
--
--------- -------
------- ----------------------------------------
--------- -- ----- -------
----------- -- ------- -------
-------
--在这个示例中，我们定义了一个名为 squared 的计算属性，它计算 count 的平方。在模板中，我们使用 {{ count }} 和 {{ squared }} 来引用组件状态和计算属性。
修改组件状态
要修改组件状态，我们可以在组件的方法中使用 this 关键字来引用它。例如，下面是一个简单的组件，它包含一个名为 increment 的方法，它将 count 属性的值增加：
-- -------------------- ---- -------
------------------------ -
----- -------- -- -
------ -
------ -
-
--
-------- -
---------- -------- -- -
------------
-
--
--------- -------- ------------------------- ----- ------------
--在这个示例中，我们定义了一个名为 increment 的方法，它将 count 属性的值增加。在模板中，我们使用 v-on:click 指令来绑定 increment 方法到按钮的点击事件。
Vuex 状态管理库
在大型的 Vue.js 应用中，组件状态可能会变得非常复杂。为了更好地管理状态，我们可以使用 Vuex 状态管理库。Vuex 允许我们将应用的状态集中存储和管理，以便在应用中共享和修改数据。
定义 Vuex 存储
要定义 Vuex 存储，我们需要创建一个包含状态的对象，并将其传递给 Vuex.Store 构造函数。例如，下面是一个简单的存储，它包含一个名为 count 的状态：
const store = new Vuex.Store({
state: {
count: 0
}
})在这个示例中，我们创建了一个名为 store 的 Vuex 存储，并使用 state 选项定义了一个名为 count 的状态。
访问 Vuex 存储
要访问 Vuex 存储中的状态，我们可以使用 $store 对象在组件中引用它。例如，下面是一个简单的组件，它使用计算属性来计算 count 的平方：
-- -------------------- ---- -------
------------------------ -
--------- -
-------- -------- -- -
------ ----------------------- - -----------------------
-
--
--------- -------
------- -------------------------------------------------------------
--------- -- ------------------ -------
----------- -- ------- -------
-------
--在这个示例中，我们使用 $store 对象在计算属性中引用 count 状态，并在模板中使用它来显示 count 和 squared 的值。我们还使用 v-on:click 指令将 increment 操作提交到 Vuex 存储。
修改 Vuex 存储
要修改 Vuex 存储中的状态，我们可以使用 $store.commit 方法在组件中提交一个操作。例如，下面是一个简单的组件，它包含一个名为 increment 的操作，它将 count 状态的值增加：
Vue.component('counter', {
methods: {
increment: function () {
this.$store.commit('increment')
}
},
template: '<button v-on:click="increment">{{ $store.state.count }}</button>'
})在这个示例中，我们定义了一个名为 increment 的操作，并使用 $store.commit 方法将其提交到 Vuex 存储。在模板中，我们使用 {{ $store.state.count }} 来引用 count 状态的值。
总结
在本文中，我们介绍了 Vue.js 中数据存储的基础知识，包括如何使用组件和 Vuex 状态管理库来实现数据存储。我们学习了如何定义组件状态、访问组件状态、修改组件状态、定义 Vuex 存储、访问 Vuex 存储和修改 Vuex 存储。这些知识对于开发 Vue.js 应用程序非常重要，并且可以帮助我们更好地管理和共享数据。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/660ce84ed10417a222d484d4