- State
- 数据,存放一些公共部分的数据
- Mutations
- 数据怎么改变,定义改变state的一些方法
- Actions
- 异步改变,如果需要异步改变state,则在这书写
vue-cli3在最外部的store.js中配置,vue-cli2在src/store
image.png
在parent.vue中获取vuex的值
-
方式1:
image.png -
方式2:使用辅助函数
image.png
触发mutation
也有辅助函数的用法
image.png
dispatch触发actions
- getters-vuex中的计算属性
- 当你需要依赖vuex里的state中的数据,做进一步处理时使用
state: {
count: 0,
},
// 根据state中的count进一步处理,计算双倍值
getters: {
doubleCount (state) {
return state.count * 2
}
},
- 模块化概念-Modules
- 当vuex里的数据十分庞大时,可根据存放的数据所属模块进行划分
text.js是其中一个模块
image.png
在src/store/index.js中加入text.js模块
image.png
获取模块中的值
image.png
网友评论