Vuex入门教程

Vuex是什么？

官方解释：Vuex是专门为Vue.js应用开发的状态管理模式。它采用集中式存储来管理应用程序所有组件的状态，并确保状态以可预测的方式随着相应的规则而变化。

相信很多新选手看完这段文字都感到绝望。我一开始也是这么做的，后来想到了一个类比！

比如某个年级有五个小班，每个班有25个学生，但是只有一个老师在教。如果五个小班对应五个成分，那么每个班25个学生就相当于每个成分25条数据。这个老师相当于vuex，老师教的课相当于每一条数据。要保证每个学生都受到同样的教育，就需要老师每节课分别讲五遍，但不能保证每节课的学生都能听到同样的效果。过了一段时间，老师觉得很麻烦很累，就想了一个办法，找了一个大教室，把这五个小班的学生组合起来，这样每门课只需要讲一次，每个班的学生都能听到同样的效果。这是vuex的功能，统一管理各个组件使用的数据，同步分发，省时省心省力。

那这个vuex怎么用？让我们从一个简单的Vue计数应用程序开始

一、基本用法

1.初始化并创建项目

Vue init网络包-简单的vuex-演示光盘vuex-演示pm安装2。安装vuex

Npm安装vuex -S3。在src目录中创建store.js文件，并在main.js文件中导入和配置它

在store.js中写入

从' vue'/中导入Vue/从' vuex '中导入vuex并使用导入vuex Vue . use(vuex)main . js文件

从“vue”导入vue，从“导入应用程序”。/app.vue“从导入商店”。/assets/store//导入store对象new Vue({ //配置store选项并将其指定为store对象，Store对象将自动注入所有子组件，并通过此访问Store对象。$ store in sub components，el:' # app '，render3360h=h (app)}) 4。编辑store.js文件

在应用vuex之前，我们还需要了解这个流程图，其实很简单。

状态管理

(1) vue组件是我们的vue组件，会调度一些事件或者动作，也就是图中的动作；2我们在组件中发出的动作肯定是想获取或者更改数据，但是在vuex中，数据是集中管理的，所以我们不能直接更改数据，所以我们将这个动作提交给variations(3)然后突变状态中的数据；当状态中的数据发生变化时，会重新渲染到Vue Components中，组件会显示更新后的数据，完成一个过程。

Vuex的核心是Store，相当于一个容器。存储实例包含以下属性方法：

状态定义属性(状态、数据)

在store.js中写入

//定义属性(数据)var state={count:6}//创建store对象const store=new vuex . store({ state })//导出store对象导出默认存储；模式1。您可以通过此访问存储对象。$store in app.vue并获取计数。

模板div id='app' /直接写count方法，可以执行h1 { { count } }/h1/div/templatescript export default { name : ' app '。Computed:{ count(){ //返回获取的数据返回此。$商店。国家。count } } }/脚本模式2，由vuex提供的mapGetters和mapActions

MapGetters用于获取属性(数据)

在app.vue中引入mapGetters

从' vuex'' (2)导入{mapGetters}，调用app.vue文件的计算属性中的mapGetters辅助方法，传入一个数组，指定要在数组中获取的属性个数

scriptimport {mapGetters，mapActions}从' vuex '导出默认{ name: 'app '，Computed:mapGetters([ //此处的计数对应于下面store.js文件' count' ]中getter中的计数)}/script定义store.js中的getter方法并导出

吸气剂用于获得性能

从“vue”导入vue从“vuex”导入vuex . use(vuex)//define attribute(data)var state={ count :6 }//define getter svar getter={//您需要传递一个形式参数。用于获取state属性count(state){ returnstate . count } }//创建store对象const store=new vuex . store({ state，getter })//导出store对象导出默认存储；这样，传输的数据就会显示在页面上！接下来，我们将通过行动改变获取的数据

在store.js中定义动作和变体方法并导出它们

动作定义方法(动作)

提交提交更改，修改数据的唯一方法是显示提交更改

突变定义变化并处理状态(数据)的变化

从' vue '导入vue从' vuex '导入vue . use(vuex)//定义属性(数据)var state={count:6}//定义getter svar getter={ count(State){ return State . count } }//定义要执行的操作、动作，如进程判断和异步请求const actions={//({commit，state})，它被写成对象解构增量({commit，State}){ //提交一个名为increment的变更，其名称可以自定义，可以认为是类型//提交提交更改。修改数据的唯一方法是显式提交突变commit(' increment ')} }//定义突变，并处理状态(数据)的变化。const突变={ //对应于上面提交中的“increment”。增量(状态){ state.count} }//创建store对象const store=new vuex . store({ state，getters，actions，variations })//导出store对象导出默认存储；将mapActions引入app.vue并调用

映射动作用于获取方法(动作)

从“vuex”导入{ mapgetters，mapActions}调用mapActions辅助方法，并传入一个数组，在该数组中指定了要获取的方法增量

Template div id='app' /此增量方法对应于以下方法中的增量。button @click='increment '递增/button button递减/button h1 { { count } }/h1/div/templatescript import { mapgeters，mapActions } from ' vuex ' export default { name : ' app '，computed : mapgeters([' count '])，Methods:mapActions增量来自store.js中导出的操作和variations中的增量' increment '，])}/script，这样就可以通过button更改获得的计数。

看起来确实挺复杂的，需要在理解了原理之后再去思考，加深理解。

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。