山西省建设工程网站,自己可以给公司做网站吗,招聘网找工作,定制研发服务文章目录 一、state是什么#xff1f;二、state状态的作用三、如何使用store数据呢#xff1f;使用数据的两种方式#xff1a;1. 通过store 直接访问2. 通过辅助函数访问(简化) 一、state是什么#xff1f;
state是状态#xff08;数据#xff09; #xff0c; 类似于v… 文章目录 一、state是什么二、state状态的作用三、如何使用store数据呢使用数据的两种方式1. 通过store 直接访问2. 通过辅助函数访问(简化) 一、state是什么
state是状态数据 类似于vue组件中的data
区别
data 是组件自己的数据state是所有组件共享的数据
二、state状态的作用
State提供唯一的公共数据源所有共享的数据都要统一放到Store中的State中存储。在state对象中可以添加我们要共享的数据。
明确如何给仓库 提供 数据如何 使用 仓库的数据
三、如何使用store数据呢
首先我们需要在store文件夹中的 index.js 文件中添加数据
const store new Vuex.Store({// 通过state 可以提供数据 所有组件共享的数据state: {title: 大标题,count: 100}
})
使用数据的两种方式
通过store 直接访问通过辅助函数 1. 通过store 直接访问
先找仓库store → 查看状态 state → 使用数据 在模板中使用vuex数据{{ $store.state.count}} 在组件逻辑中使用vuex数据this.$store.state.count 在js中使用vuex数据store.state.count 三种使用的方式有些不需要this有些没有不支持this需要注意 2. 通过辅助函数访问(简化) 先导入 mapState函数 import {mapState} from ‘vuex’ 使用computed计算属性快速映射仓库中的状态 computed: {...mapState([count, title])}
就可以直接使用了 从vuex中获取的值:label{{ count }}/label
