vuex五个核心概念,vuex的理解和使用
本文主要介绍了vuex的核心概念和基本用法，具有一定的参考价值。感兴趣的朋友可以参考一下，希望能帮到你。
目录
:安装入门直接下载CNDNPM纱NPM安装：商店概念和使用概念：定义使用概念和使用概念：使用：定义使用动作概念和使用概念：定义使用getters概念和使用概念：定义使用总结
介绍
Vuex是一种管理组件全局状态(数据)的机制，可以促进组件之间的数据共享。
开始
安装
直接下载方式
创建一个vuex.js文件，把https://unpkg.com/vuexs网站的内容放在这个文件夹里。
CND方式
script src= https://cdn . jsdelivr . net/NPM/es6-promise @ 4/dist/es6-promise . auto . js /script
NPM方式
npm安装vuex -保存
Yarn方式
纱线添加vuex
NPM方式安装的使用方式
1.在scr文件中创建一个store/index.js的文件夹，写入以下内容。
从“vue”导入Vue
从“vuex”导入Vuex
Vue.use(Vuex)
导出默认的新Vuex。商店({
状态：{}，
突变：{}，
动作：{}，
模块：{}
})
2.在main.js中引入，然后挂载到Vue实例中。
从“vue”导入Vue
从导入存储。/商店
新Vue({
render: h=h(App)，
商店
}).$ mount(“# app”)
store概念及使用
概念：
它是组件之间的数据共享。
只有突变可以修改存储中的数据。
使用：
使用前定义。
定义
状态：{
数量：0
}
使用
方式1(推荐)
div{{ numAlias }}/div
从“vuex”导入{ mapState }
导出默认值{
//计算函数
计算的：mapState({
//传递字符串参数“count”等效于state=state.count
NumAlias: num ，//常用的key是random value收到的数据，有自己的名字。
//箭头函数可以使代码更加简洁
count: state=state.count
//为了能够使用“this”来获取本地状态，必须使用常规函数
countPlusLocalState(州){
返回状态。count this.localCount
}
//您可以定义其余的计算函数
}),
//或者这样
//计算函数
计算值：{
mapState([count])
}
}
方式2
div{{ $store.state.count }}/div
mutations概念及使用
概念：
修改存储中的数据。严禁在其他地方修改商店中的数据。不要在突变中执行异步操作。
变异必须同步执行，不能异步执行。
使用：
在使用方法之前先定义它们。
定义
突变：{
//增量自定义方法存储参数是存储数据，参数parameter是接收数据，所以不要
增量(状态，参数){
//更改状态
状态编号
}
}
使用
方式1(推荐使用)
从“vuex”导入{ mapState，mapMutations }
//方法
方法：{
.地图突变([
//突变自定义方法名
增量
]),
爱情(){
//直接从this调用this.increment(需要传递过去的数据，但不要)
this.increment(Bin )
}
}
方式2
方法：{
爱情(){
//这个。$store.commit(自定义名称，传递过去的数据，但不传递)
这个。$store.commit(increment ， data )
}
}
action概念及使用
概念：
用于处理异步操作。
如果通过异步操作改变数据，必须使用动作而不是突变，但仍然需要通过触发动作中的突变来间接改变数据。
动作类似于突变，除了：
动作提交突变，而不是直接改变数据(状态)。
动作可以包含任何异步操作。
定义
突变：{
//增量自定义方法存储参数是存储数据，参数parameter是接收数据，所以不要
增量(状态，参数){
//更改状态
状态编号
}
},
动作：{
//添加自定义方法上下文是一个参数，可以看作是vuex的一个实例。
添加(上下文){
//您可以传递context.commit(“要在突变中调用的突变方法”)
语境。提交(“增量”)
}
}
使用
方式1(推荐)
从" vuex "导入{地图状态，地图突变，地图操作}
导出默认值{
方法：{
.地图操作([
添加,//将` this.add()映射为"这个$store.dispatch(add )。
//`mapActions 也支持载荷：
添加//将` this.add(金额)映射为"这个store . dispatch( add ，amount)`
]),
.地图操作({
添加：添加//将` this.add()映射为"这个$store.dispatch(increment )。
}),
爱情(){
//直接这调用this.add(需要传过去的数据，可不要)
this.add(数据)
}
}
}
方式2
方法：{
爱情(){
//这个. store.dispatch(自定义的名称, 传过去的数据，可不传)
这个store.dispatch(add ，数据)
}
}
getters概念及使用
概念：
吸气剂用于对商店中的数据进行加工处理形成新的数据正在获取可以对商店中已有的数据加工处理之后形成新的数据，类似某视频剪辑软件的计算缩写。
定义
状态：{
数量：0
},
getters: {
doneTodos: state={
返回state.num=10
}
}
使用
方式1(推荐)
div{{ doneTodos }}/div
从" vuex "导入{映射状态，映射突变，映射操作，映射获取器}
导出默认值{
//计算函数
计算值：{
.mapState([count])，
.mapmapGetters([doneTodos])
}
}
方式2
div { { $ store。吸气剂。donetodos } }/div
总结
本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注我们的更多内容！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。