vuex教程,vuex项目
Vuex是专门为vue开发的状态管理工具。它使用集中存储来管理应用程序所有组件的状态，其核心是状态。下面这篇文章主要介绍Vuex的安装、施工、案例的相关信息，有需要的可以参考一下。
目录
vuex 1原理介绍。安装Vuex组件2。使用Vuex Sum Case Coute。vue store . jsactionsgatets:storeStore仓库数据的使用：简介渲染摘要GetState
前言
本文谈谈Vuex的安装和施工。以及动作、突变、状态、Getters的使用，以及为什么使用mapState、mapGetters的解释和一些细节。
Vuex原理讲解
动作：词义就是动作。
突变：意义是加工和维持。
状态：词义是状态和数据。
派遣：这个词的意思是派遣或送出。
提交：提交
渲染：渲染
突变：转换
从这几个字可以大致概括出整个图的流程。
VC将消息发送到动作，将动作提交到突变(Mutate)状态，然后重新呈现整个页面。
1、安装vuex组件
注意：vue3只能用vuex4版本，vue2只能用vuex3版本。2022年2月7日之后，vue3成了默认版本，vuex4相应的也成了默认版本。所以对于vue2，要注明vuex的版本 @3
在package.json中看到vuex，说明安装成功。
2、使用Vuex
首先，你需要创建一个商店。
在Src中，创建一个名为store的文件夹，其中包含一个index.js文件
从上面的示意图可以看出，存储至少包含了动作、突变和状态。
如下图
(要创建Store实例，需要使用Vuex。Store，所以需要参考Vuex)
Vue.use(Vuex)的作用是让Vue识别store属性，否则初始化Vc时，vue不会解析store属性。
Main.js的配置如下
其中store相当于store:store。根据ES6语法规则，如果key和value一样，可以简写成key的形式
从“vue”导入Vue
从导入应用程序。/App.vue
Vue.config.productionTip=false
从导入存储。/商店
新Vue({
render: h=h(App)，
商店
}).$ mount(“# app”)
就这样，Vuex的架子搭好了，我们来练习一下，借此机会深入介绍一下Vuex的属性。
求和案例
说明：点击按钮触发Click事件，向Actions发送消息查找addSum，携带参数1。在Actions中，接受参数并将其提交给带有参数1的变异。突变改变状态中sum的值，vue检测sum的变化，重新渲染整个页面。
效果图：
Coute.vue
模板
差异
h1的当前值为：{{sum}}/h1
Button @click=addSum 点我加1/button
点击按钮，我将减去1/按钮
/div
/模板
脚本
导出默认值{
名称：“Coute”，
方法：{
加法和()
{
这个。$store.dispatch(addSum ，1)；
}
},
计算值：{
总和()
{
归还这个。$ store . state . sum；
}
}
}
/脚本
风格
按钮{
右边距：2px
}
/风格
store.js
从“vuex”导入Vuex
从“vue”导入Vue
Vue.use(Vuex)
常量状态={
总和：1
};
常量突变={
ADDSUM(状态，值)
{
state.sum=value
}
};
常量操作={
addSum(上下文，值)
{
context.commit(ADDSUM ，value)；
}
};
导出默认的新Vuex。商店({
状态，
突变，
行动
})
详细看看运行中的可移植参数和变化。
Actions
设置四个参数并打印出来。
因此，只输出两个参数。第一个参数是一个对象，包含commit、dispatch等属性，第二个参数是要携带的值。
第二个参数叫value，第一个参数通常叫Context，最常用的是Commit。如果你只是想得到一个Commit，你也可以写成这个形式。
Mutations
同样，在突变中只有两个参数，第一个是状态(见sum)，第二个是进位值。突变最大的作用就是可以改变状态的值。
问：为什么你需要一个行动？在求和的情况下，我将参数传递给动作，动作原封不动地传递给突变。为什么我不把它们传递给突变呢？
答：真的是这样的。如果确定了参数，您可以跳过操作，直接提交到变异。但是如果参数不确定，比如我需要向服务器请求数据，那么我必须使用Actions来发送Ajax。
getters的使用：
如果多个组件使用状态中数据的已处理值，例如在sum情况下为sum的20倍。吸气剂只能处理一次，因此可以同时使用多个组件。
store
从“vuex”导入Vuex
从“vue”导入Vue
Vue.use(Vuex)
常量状态={
总和：1
};
常量突变={
ADDSUM(状态，值)
{
state.sum=值
}
};
常量操作={
addSum({commit}，value)
{
提交( ADDSUM ，值)
}
};
const getters={
bigSum(州)
{
返回state.sum*20
}
}
导出默认的新Vuex。商店({
状态，
突变，
行动，
吸气剂
})
Store仓库数据的使用：
现在我们有了多个数据，我们如何在任何组件中访问它呢？显示组件之间的通信。创建新的组件信息
答案是通过计算得出的。
模板
差异
H1姓名：{ {姓名}}/h1
H1学校：{ {学校}}/h1
H1头衔：{{Marquis}}/h1
/div
/模板
脚本
导出默认值{
名称：信息，
计算值：{
学校()
{
归还这个。$ store . state . school；
},
总和()
{
归还这个。$ store . state . sum；
},
名称()
{
归还这个。$ store . state . name；
},
侯爵()
{
归还这个。$ store . state . marquis；
}
}
}
/脚本
风格
/风格
效果图
GetState 的引入
由上图所示，这样一个一个的写，虽然可以写出来，但是实在是太麻烦了。干的都是一样的工作。所以Vue给我们提供了一个方法。mapState和mapGetters。这两个一个是简化State里的属性，一个是简化getters里面的属性。
第一种方法可以简写成下面这种形式。（对象写法。函数的名字可以随意）
为什么使用.地图状态。原因：mapState报告了一个错误。
为什么要报错？
输出mapState()来看看。
在地图里面是一个物体。Computed本身也是一个对象。如果在{}里再加一个{}，肯定会报错。那为什么要用.在ES6使用中，对象t1、对象t2、t1{.t2}相当于把t2中的所有属性都拿出来，一个一个放到t1中。
第二种方法：数组方法(无论状态中的属性是什么，都必须编写)
效果都是可以的
mapGetters同理，就不赘述了
[错误演示-使用Vuex时]
Vue.use(Vuex)在main.js里面使用
主页. js
从“vue”导入Vue
从导入应用程序。/App.vue
从“vuex”导入Vuex
Vue.use(Vuex)
Vue.config.productionTip=false
从导入存储。/商店
新Vue({
render: h=h(App)，
商店
}).$ mount(“# app”)
从“vuex”导入Vuex
常量状态={
};
常量突变={
};
常量操作={
};
const getters={
}
导出默认的新Vuex。商店({
状态，
突变，
行动，
吸气剂
})
你发现报了一个这样的错误（Vue.use(Vuex)应该在创建store之前执行），然后仔细检查了一遍，确认Vue.use(Vuex)写在了引入store之前。为什么还报错呢？这里我想说的就是Vue在解析代码的时候，会按顺序首先执行所有的import的语句，所以Vue.use(Vuex)只能写在store里面
[报告错误]
语法校验不过关，在vue.config.js加上这句lintOnSave:false（关闭语法校验）
总结
关于Vuex的安装建设和案例详解的这篇文章到此为止。关于Vuex更详细的解释，请搜索我们之前的文章或者继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。