目标:明确如何给仓库提供数据,如何使用仓库的数据
一、提供数据:
State 提供唯一的公共数据源,所有共享的数据都要统一放到 Store 中的 State 中存储。在 state 对象中可以添加我们要共享的数据。
// state : 状态,即数据,类似于 vue 组件中的 data(区别:data 是组件自己的数据,state 是所有组件共享的数据)
const store = new Vuex.Store({
state : {
count : 101
}
})
二、使用数据:
1. 通过 store 直接访问:
// 获取 store:this.$store 或 import 导入 store
模板中:{{ $store.state.count }}
组件逻辑中:this.$store.state.count
JS 模块中:store.state.count
2. 通过辅助函数(简化):
mapState 是辅助函数,帮助我们把 store 中的数据 自动 映射到 组件的计算属性中
1. 导入 mapState:import { mapState } from 'vuex'
2. 以数组的形式引入 state
3. 展开运算符映射
------------------------------------------------------------------------------------------------------------------------------------
mutations:修改仓库的数据
知识点:vuex 同样遵循单项数据流,组件中不能直接修改仓库的数据。应该通过 mutations 进行修改数据
标签:数据,mutations,访问,state,组件,vuex,store From: https://www.cnblogs.com/gagaya2/p/17760778.html