组件中的信息传递需要在被引用的组件中声明参数，在引用组件中传参。若组件的层级过深则需要频繁声明变量和传参，比较繁琐。Vue官方提供了VueX，可以集中地管理这些参数/变量。我们只需要在VueX中声明需要在各个组件中使用的变量和函数，在其他需要的组件中引用这个变量就可以。并且这些变量是全局的，在一个组件中改变了它的值后，其他组件内的值也会跟着改变。

引入Vuex的步骤

第一步：安装Vuex npm install --save vuex

第二步：配置Vuex文件

在src文件夹下创建一个文件夹store，在store文件夹下创建一个index.js，里面写上如下代码。

import { createStore } from 'vuex'

export default createStore({
  state: {
      counter:0
  }
})

第三步：在主文件中引入Vuex

在main.js中添加如下代码，表示在全局应用对象中使用vuex。

import store from './store'
app.use(store)

第四步：在组件中读取状态

在组件的template中添加如下内容渲染文档。

<p>counter:{{ $store.state.counter }}</p>

也可以是：

<script>
import { mapState } from 'vuex';
computed:{
    ...mapState(["counter"])
}
</script>
<template>
<p>{{ counter }}</p>
</template>

版权所有

许可证：署名 4.0 国际 (CC-BY-4.0)

上一页嵌套路由配置

下一页Vue状态管理核心(Vuex)