轻松的理解,轻松阅读理解
本文主要介绍Vuex及其用法。有兴趣的同学可以参考一下。
目录
Vuex的四大对象概述：状态的用法、突变的用法、getters的用法、actions的用法、Vuex的适用场景
概述
Vuex是专门为Vue.js应用(https://vuex.vuejs.org/zh/，官网)开发的状态管理模式。它采用集中存储来管理应用程序所有组件的状态，并确保状态以可预测的方式随相应的规则变化。
用我们的大白话来说：Vuex是一种状态管理模式，可以简单理解为全局对象。然后我们可以修改这个全局对象中的属性或者添加方法，但是不能像传统JS的直接赋值形式那样修改。我们得根据Vuex提供的规则修改它；
vue的存在是用来解决组件之间的值传递问题的。说白了就是看我们传统VUE亲子成分价值传递的麻烦和弊端，给我们带来的好处。这个官网说的很清楚：
提示：本文将以模块导入导出的形式使用vuex。这篇文章有点长，希望耐心看完。当然，如果条件允许的话，跟着做就更好了！
Vuex四大对象
它们是状态、突变、获取器和动作；
状态：Vuex中的数据源。我们需要的公共数据都存储在这里，可以简单理解为透明仓库。你可以通过这个访问这个仓库中的数据源。$store.state变量名；
突变：突变相当于这个仓库的钥匙。只能通过提交突变来修改数据源，也就是说，如果要改变这个仓库的数据，只能通过突变来修改(这个。$store.commit(方法名)；
Getters:getters类似于vue中的computed属性。getters的返回值将根据它在state中所依赖的值的状态修改而改变。如果getters中它所依赖的状态中的值没有改变，就直接从缓存中读取。如果发生变化，这里也会发生变化，可以用来监控State的值的变化。这里的Getters可以理解为国家仓库的保安。如果状态的数据发生变化，保安会采取相应的措施做出相应的改变。如果没有改变，如果什么都没有，他就继续吃，继续死(哈哈哈，我不知道是不是只是比喻不恰当，就是这个意思。大家理解就好。不要是一个混蛋)
动作：动作和突变非常相似，只是突变官方规定只能进行同步操作，而动作中可以进行异步操作；也就是说，我们需要在actions中进行异步操作，然后actions提交突变，而不是直接修改状态。也就是说，如果你进入这个仓库修改数据，你必须在你能修改它之前得到密钥，所以动作被提交给突变然后被执行：
state的用法
首先我们会新建一个项目来搭建vue的环境，这里就不赘述了。毕竟这篇文章讲的是vuex首先在项目中安装vuex:
安装vuex的命令：npm安装vuex - save
安装vuex后，我们将在src目录下创建一个新的vuex文件夹，并在vuex文件夹下创建一个新的store.js文件：
store.js:
从“Vue”导入Vue；
从“Vuex”导入Vuex；
vue . use(Vuex)；
常量状态={
数量：1
}
导出默认的新Vuex。商店({
状态，
})
然后我们引用main.js中的store.js，在实例化对象时添加store对象。
主页. js
从“vue”导入Vue
从导入应用程序。/App
从导入路由器。/路由器
//引用store.js
从导入存储。/vuex/store
Vue.config.productionTip=false
/* eslint-禁用no-new */
新Vue({
埃尔： #app ，
路由器，
//实例化时添加store对象
店，
组件：{ App }，
模板：“应用程序/”
})
然后修改我们的App.vue文件。
App.vue
模板
div id=应用程序
img src=。/assets/logo.png
//视图层添加数据便于观察。
p { {这个。$store.state.number}}/p
/div
/模板
脚本
导出默认值{
名称：“应用程序”
}
/脚本
风格
#app {
字体系列：“Avenir”，Helvetica，Arial，无衬线；
-webkit-font-smoothing:抗锯齿；
-moz-osx-font-smoothing:灰度；
文本对齐：居中；
颜色：# 2c3e50
边距-顶部：60px
}
/风格
通过上面的代码我们可以看到，我们在App中添加了一个P标签，vue vuex规定，如果我们需要读取vuex中的数据，也就是state的数据源仓库，就必须通过这个来访问。$store.state变量名。
mutations的用法
如果我们需要修改vuex中的数据源，我们可以通过提交突变来实现；
首先，我们需要在视图层中添加一个按钮来控制：
App.js
模板
div id=应用程序
img src=。/assets/logo.png
p{{$store.state.number}}/p
//添加一个按钮来触发修改数据源的事件
按钮@click=添加按钮/按钮
/div
/模板
脚本
导出默认值{
名称：“应用程序”，
方法：{
add(){
//要修改数据源，需要使用vuex指定的方法。
这个。$ store . commit( addFunction )；
}
}
}
/脚本
风格
#app {
字体系列：“Avenir”，Helvetica，Arial，无衬线；
-webkit-font-smoothing:抗锯齿；
-moz-osx-font-smoothing:灰度；
文本对齐：居中；
颜色：# 2c3e50
边距-顶部：60px
}
/风格
然后修改我们的store.js:
从“Vue”导入Vue；
从“Vuex”导入Vuex；
vue . use(Vuex)；
常量状态={
数量：1
}
//添加突变对象，状态参数可以得到上述状态。
常量突变={
addFunction(state){
返回state . number=1；
}
}
//一定要添加到这里的实例中，否则会报错。
导出默认的新Vuex。商店({
状态，
突变
})
我们可以直观的看到，我们可以通过这个提交突变来修改数据源。$store.commit(方法名)，当然我们的突变也可以接收参数。第一个参数是突变的方法名，第二个参数是突变需要接收的参数，让我们的突变变得更加灵活；
getters的用法
Getters类似于vue的计算机用法，它可以监控状态数据源仓库的数据变化。如果getter所依赖的数据状态发生变化，那么getter所依赖的数据也会发生变化，状态也会发生变化。
首先，我们可以在store.js中添加以下代码：
从“Vue”导入Vue；
从“Vuex”导入Vuex；
vue . use(Vuex)；
常量状态={
数量：1
}
const getters={
//方法触发的state就是上面的state对象，可以读取state的值。
addFunction(state){
返回state.number
}
}
导出默认的新Vuex。商店({
状态，
//在这里实例化的时候一定要记得添加对象。
吸气剂
})
我们可以像这样更改App.vue中的视图：
模板
div id=应用程序
img src=。/assets/logo.png
页面的值：{{$store.state.number}}/p
//添加一个标签以与页面的值进行比较
p我的getters的值：{ { $ store . getters . add function } }/p
/div
/模板
脚本
导出默认值{
名称：“应用程序”，
}
/脚本
风格
#app {
字体系列：“Avenir”，Helvetica，Arial，无衬线；
-webkit-font-smoothing:抗锯齿；
-moz-osx-font-smoothing:灰度；
文本对齐：居中；
颜色：# 2c3e50
边距-顶部：60px
}
/风格
通过上面的代码和视图层，我们可以清楚的看到，当我们操作getters时，getters的addFunction方法被触发，addFunction方法会改变state.number的值，此时number的值已经是2了，所以页面上会显示2的值。因为在后面，此时getters的值为1。也就是说，当getters依赖的state.number的值在getters中发生变化时，state.number也会发生变化。如果state.number没有改变，getters将首先读取缓存。
actions的用法
Actions对象主要执行异步操作，类似于突变，只不过actions是通过提交突变来改变数据，而不是直接改变数据状态；
首先，我们可以更改store.js中的代码：
从“Vue”导入Vue；
从“Vuex”导入Vuex；
vue . use(Vuex)；
常量状态={
数量：1
}
常量突变={
addFunction(state){
返回state.number
}
}
const getters={
addFunction(state){
返回state.number
}
}
//context是与store实例具有相同属性和方法的对象。
常量操作={
addFunction(上下文){
context . commit(“add function”)；
}
}
导出默认的新Vuex。商店({
状态，
突变，
吸气剂，
//实例化时记得在这里添加
行动
})
App.vue中的代码修改为：
模板
div id=应用程序
img src=。/assets/logo.png
页面的值：{{$store.state.number}}/p
按钮@click=添加按钮/按钮
/div
/模板
脚本
导出默认值{
名称：“应用程序”，
方法：{
add(){
//通过这个提交变异进行修改。//actions中的store.dispatch
这个。$store.dispatch(addFunction )
}
}
}
/脚本
风格
#app {
字体系列：“Avenir”，Helvetica，Arial，无衬线；
-webkit-font-smoothing:抗锯齿；
-moz-osx-font-smoothing:灰度；
文本对齐：居中；
颜色：# 2c3e50
边距-顶部：60px
}
/风格
Vuex的适用场景
在项目开发中，可能会有很多数据或参数需要我们多次读取或修改，比如购物车等类似的功能。这时候我们的可以通过vuex来实现；毕竟vuex只是一种状态管理模式。状态管理模式对我们来说是方便的，但也不是必须的，因为状态管理能做的，也可以通过其他方式方法实现。其实个人觉得，vuex和localStorange的相似之处在于用来存储和修改数据，为了解决跨页数据丢失的问题；
也就是上面这篇文章让大家很容易理解Vuex的细节。更多关于Vuex的信息，请关注我们的其他相关文章！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。