Vuex是一个专为Vue。js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化.Vuex也集成到Vue的官方调试工具devtools扩展,提供了诸如零配置的穿越调试,状态快照导入导出等高级调试功能。
以上是vuex的官方文档对vuex的介绍,官方文档对vuex的用法进行了详细的说明。这里就不再细讲vuex的各个用法,写这篇博客的目的只是帮助部分同学更快地理解并上手vuex。
1。安装
npm安装vuex美元——保存
2。在主要。js主入口js里面引用store.js
从“Vue”进口Vue
导入应用程序从“/App。”
从“进口路由器。/路由器的
从“进口商店。/vuex/商店//引用store.js
Vue.config。productionTip=false//阻止在启动时生成生产提示//vue实例
新Vue ({
埃尔:“#应用”,
路由器,
商店,//把商店挂在到vue的实例下面
模板:& lt; App/祝辞,
组件:{应用}
})
之前
3。在store.js里引用Vuex
从“Vue”进口Vue
从“Vuex”进口Vuex
Vue.use (Vuex)//注册Vuex//定义常量如果访问他的话,就叫访问状态对象
const状态={
数:1
}//用突变来改变存储状态,如果访问他的话,就叫访问触发状态
const突变={//这里面的方法是用这个。美元store.commit(“贾”)来触发
贾(状态){
状态。数+ +
},
剑(状态){
状态。数,
},
}//暴露到外面,让其他地方的引用
出口默认新Vuex.Store ({
状态,
突变
})
之前
4。在vue组件中使用
使用store.commit美元(“贾”)区触发下突变面的加减方法
& lt; template>
& lt; div类=癶ello”比;
& lt; h2>你好Vuex
& lt; h6> {{$ store.state.count}} & lt;/h6>
& lt; p>
& lt;按钮@click=" $ store.commit(“贾”)“在+ & lt;/button>
& lt;按钮@click=" $ store.commit(剑)“祝辞& lt;/button>
& lt;/p>
& lt;/div>
& lt;/template>
& lt; !——加上作用域是css只在这个组件里面生效,为了不影响全局样式——比;
& lt; scoped>风格;
编辑{
字体大小:20 px;
颜色:红色;
}
& lt;/style>
之前
5。查看演示
6。州访问状态对象
使用计算计算
& lt; template>
& lt; div类=癶ello”比;
& lt; h2>你好Vuex
& lt; h6>{{数}}& lt;/h6>
& lt; p>
& lt;按钮@click=" $ store.commit(“贾”)“在+ & lt;/button>
& lt;按钮@click=" $ store.commit(剑)“祝辞& lt;/button>
& lt;/p>
& lt;/div>
& lt;/template>
& lt; script>
从“vuex”进口{mapState}
出口默认{
名称:'你好',//写名字上的作用是,如果你页面报错了,他会提示你是那个页面报的错,很实用//方法一//计算:{//计数(){//返回store.state美元。数+ 6//}//}//方法二需要引入外部mapState
计算:mapState ({
数:状态=比;状态。数+ 10
})//ECMA5用法//计算:mapState ({//计数:函数(状态){//返回state.count//}//})//方法三//计算:mapState ([//笆?/)
}
& lt;/script>
之前
7。突变触发状态(同步状态)
& lt; template>
& lt; div类=癶ello”比;
& lt; h2>你好Vuex
& lt; h6>{{数}}& lt;/h6>
& lt; p>
& lt;按钮@click=凹帧弊４? & lt;/button>
& lt;按钮@click="剑"祝辞& lt;/button>
& lt;/p>
& lt;/div>
& lt;/template>
& lt; script>
从“vuex”进口{mapState, mapMutations}
出口默认{
名称:'你好',//写名字上的作用是,如果你页面报错了,他会提示你是那个页面报的错,很实用//方法三
计算:mapState ([
“数”
]),
方法:{
……mapMutations (
“贾”,
“剑”
])
}
}
& lt;/script>
8。getter计算属性
getter不能使用箭头函数,会改变这样的指向
