前言:Vuex是一个专门为Vue。js应用程序开发的状态管理模式,它采用集中式存储管理所有组件的公共状态,并以相应的规则保证状态以一种可预测的方式发生变化。
<强> Vuex的四大核心
1。州驱动应用的数据源
2。突变基因突变类如c#属性得到设置
3。行操作为
4。getter读取器
从“Vuex”进口Vuex
Vue。使用(Vuex);
常量存储=new Vuex.Store ({//待添加
}）
新Vue ({
埃尔:“#应用”,
商店,
呈现:h=比;h(应用)
}）
之前
为了讲解Vuex,我们做了一个项目,这个项目需要连接apicloud,异步操作使用了axios以及样式引导,其中包括了登录注册以及其中的父组件向子节点传值等,我们给项目安装相关的模块
npm安装引导
npm安装axios
router.js
从“Vue”进口Vue
从“vue-router”进口路由器
Vue.use(路由器)
出口默认新路由器({
路线:[
{
路径:“/?
名称:“指数”,
组件:()=祝辞导入(“. ./视图/index.vue”)
}，
{
路径://细节:id,
名称:“细节”,
组件:()=祝辞导入(“. ./视图/detail.vue”)
}，
{
路径:/登录,
名称:“登录”,
组件:()=祝辞导入(“. ./视图/login.vue”)
}，
{
路径:/注册,
名称:“注册”,
组件:()=祝辞导入(“. ./视图/register.vue”)
}
］
})
store.js
我们来上述代码中来讲解其中vuex的奥秘,状态就是所有组件提出来的数据,用于所有组件公共数据,而其中突变就像c#中获取\设置,属性赋值器,其中方法的两个参数除了状态只能带一个参数。
行动是操作数据的方法,说过说你的行动中需要改变状态中的数据,那么必须要通过提交关键字去提交给突变,还有一点就是行动中很多操作都是关于异步处理的,最关键就是它是操作状态数据的,那getter是什么呢?它是组件访问vuex的入口,里面写好了方法去操作,它也是过滤器,就像程序中的三层架构BLL。
main.js
//加载Vue构建版本的“进口”命令//(运行时只或独立)被设置在webpack.base。配置一个别名。
从“Vue”进口Vue
导入应用程序从“/App。”
从“进口路由器。/路由器的
从“进口boostrap引导/dist/css/bootstrap.css '
从“进口商店。/存储/index.js '
Vue.config。productionTip=false/* eslint-disable没有新*/新Vue ({
埃尔:“#应用”,
路由器,
商店,//在全局对象上加载仓库
组件:{应用},
模板:“& lt; App/祝辞;”
})
两个组件
从“Vue”进口Vue
从“Vuex”进口Vuex
从“. ./跑龙套/api.js”进口API
var api=新的api(“产品”)
var userApi=新的API(“用户信息”);
Vue.use (Vuex);
const状态={
用户:空,
产品:[]
}
const突变={//加载产品数据
INIT_PRODUCTS(状态、数据){
状态。产品=数据;
}，
SET_LOGIN_USER (u), {
状态。用户=u;
}
}
const行动={
LOAD_PRODUCTS({提交}){
api.Select ()。然后(res=比;{
提交(INIT_PRODUCTS, res.data);
}）
}，
登录({提交}、用户){
返回userApi.Select ()。然后(res=比;{
让用户=res.data;//所有的用户
(让你的用户){
如果(u.name==user.name,,u。密码==user.password) {
提交(SET_LOGIN_USER, u);
回报你;
}
}
}）
}，
注册({提交}、用户){
返回userApi.Insert(用户)。然后(res=比;{
console.log (res.data);
返回“OK”;
})。抓住(呃=比;{
返回错误;
}）
}
}
const getter={
ALL_PRODUCTS(状态){
返回state.products;
}，
GET_PRODUCT_BYID:(州)=比;函数(id) {//遍历是==id
(让p state.products) {
如果(p。id==id) {
返回p;
}
}
返回null;
}
}//仓库
常量存储=new Vuex.Store ({
状态:状态,
突变,突变,
行动:行动,
getter: getter
}）
出口默认存储;
