外观
Vue状态管理(Vuex)
组件中的信息传递需要在被引用的组件中声明参数,在引用组件中传参。若组件的层级过深则需要频繁声明变量和传参,比较繁琐。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>