本文主要介绍Vuex入门教程。小编觉得还不错。现在分享给大家，给大家一个参考。下面就跟随小编一起来看看吧。1.前言当我们的应用程序遇到多个组件共享状态时，多个组件将需要依赖同一个状态。传递参数的方法对于多层嵌套的组件来说会很繁琐，而且对于兄弟组件之间的状态传递也无能为力。在构建下面的页面时，你可能会对vue组件之间的通信感到崩溃，尤其是非父子组件之间的通信。这时候就应该使用vuex来轻松解决组件之间的通信问题。2、什么是VuexVuex是专门为Vue.js应用开发的状态管理模型。它使用集中存储来管理应用程序所有组件的状态，并使用相应的规则来确保状态以可预测的方式变化。这里的关键是集中存储管理。这意味着原来需要共享状态的更新需要组件之间的通信，但现在有了vuex，所有组件都与商店通信。3.什么时候使用Vuex虽然Vuex可以帮助我们管理共享状态，但是它也自带了更多的概念和框架。这需要在短期利益和长期利益之间进行权衡。如果你的应用程序足够简单，你最好不要使用Vuex，因为使用Vuex会很麻烦和多余。您只需要一个简单的全局事件总线。但是，如果你需要构建一个中大型的单页应用，你很可能会考虑如何在组件外部更好地管理状态，而Vuex将成为一个自然而然的选择。4.Vuex安装（开发环境仅限vue-cli）。必须先安装vue-cli脚手架。对于大陆用户，建议将npm注册源设置为国内镜像（淘宝镜像），可以大大提高安装速度。`npmconfig``set``registryhttps:``//``[registry.npm.taobao.org](http:``//registry``.npm.taobao.org/)``npmconfiggetregistry``//``配置完成后，可以通过以下方式验证是否成功``npm``install``-gcnpm--registry=[https:``//registry``](https:``//registry/``).npm.taobao.org``//cnpm``安装脚手架``cnpm``install``-gvue-cli``vueinitwebpackmy-vue``cd``my-vue``cnpm``install``cnpmrundev`脚手架安装好后，安装vuexcnpminstallvuex--save5.如何使用Vuex1。如何通过Vuex实现如下效果？①创建store.js文件`importVuefrom``"vue"``importVuexfrom``"vuex"``Vue.use(Vuex)``conststore=``new``Vuex.Store({``state:{``//这里的state必须是json，是一个对象``count:1``//这是初始值``},``mutations:{``//变异，列出所有可能的changesThemethodofstate``ad(state){``state.count++;``//直接改变state中的值而不是返回一个新的state``},``reduce(state){``state.count--;``}``}``});``export``default``store;``//用exportdefault封装代码，以便外部引用`②在main.js中引入文件store.js文件`importstorefrom``./vuex/store"``new``Vue({``router,``store,``el:``'#app'``,``render:h=>h(App)``})`③创建一个新的模板计数.vue`<``template``>``<``div``>``<``h2``>{{msg}}<``hr``/>``<``h2``>{{$store.state.count}}-{{count}}//这两个都可以写成``<``button``@``click``=``"addNumber"``>+``<``button``@``click``=``"reduceNumber"``>-``````<``script``>``从'vuex'导入{mapState}``导出默认值{``data(){``return{``msg:"HelloVuex"``};``},``方法：{``addNumber(){``returnthis.$store.commit("add");``},``reduceNumber(){``returnthis.$store.commit("reduce");``}``},``computed:mapState(['count'])//mapthis.count到this.$store.state.count``mapState函数可以接受一个对象或者数组``};```由于store中的state是响应式的，当Vue组件读取时来自商店的状态，如果商店中的状态发生变化，相应的组件将相应地有效更新。在组件中调用存储中的状态就像在计算属性中返回它一样简单。更改存储中状态的唯一方法是显式提交更改。这样我们就可以实现自增1或者自减1。如果我们想点击一次实现自增2，如何实现，即如何给Mutations传值呢？2.如何在Mutations中传递参数首先在store.js文件中的add方法中添加一个参数n`mutations:{``add(state,n){``state.count+=n;``},``reduce(state){``state.count--;``}``}`然后修改Count.vue中按钮的commit()方法传递的参数`addNumber(){``return``this``.$store.commit(``"add"``,2);``},``reduceNumber(){``return``this``.$store.commit(``"reduce"``);``}`3。getters如何实现计算和过滤操作**getters的意思是从表面获取，可以看做是一种数据获取前的重新编辑，相当于对数据的一次过滤和处理。您可以将其视为store.js的计算属性。例如：对store.js文件中的count进行操作，在输出前先加100。首先需要在store.js中的Vuex.Store()中引入gettersgetters:{count:state=>state.count+=100}然后在Count.vue中配置computed。Vue构造函数中只能计算一个。属性，如果写了多个属性，只有最后一个计算属性可用，所以需要用扩展运算符“...”来修饰上一节写的计算属性。`computed:{``...mapState([``"count"``]),``count(){``return``this``.$store.getters.count;``}``}`需要注意的是，此时点击'+'会增加102，点击'-'会增加99，最后的结果是mutations和getters的共同作用。4、actions如何异步修改state上面的actions和Mutations的作用基本相同。不同之处在于操作异步更改状态，而突变同步更改状态。①在store.js`actions中声明动作：{``addAction(context){``context.commit(``'add'``,2);``//在开头执行add，传入参数2``setTimeout(()=>{``context.commit(``'reduce'``)``},2000);``//两秒后执行reduce``console.log(``'Icomparereduceaheadoftime'``);``},``reduceAction({``commit``}){``commit(``'reduce'``)``}``}`actions可以调用在Mutations方法中，调用add和reduce两个方法。在addAction中使用setTimeOut来延迟执行。在actions中，写了addAction和reduceAction两个方法，这两个方法传递的参数是不同的。context：上下文对象，这里可以理解store本身。{commit}：直接传递commit对象，可以让方法体的逻辑和代码更加清晰②在方法体中使用`<``p``>``<``button``@``click``=`模板`"addNumber"``>+``<``button``@``click``=``"reduceNumber"``>-````<``p``>``<``button``@``click``=``"addAction"``>+//添加``<``button``@``click``=``"reduceAction"``>-//添加````import{mapState,mapGetters,mapActions}from``"vuex"``;``方法：{``...mapMutations([``'add'``,``'reduce'``]),``...mapActions([``'addAction'``,``'reduceAction'``])``}`最后得到如下效果：点击addAction按钮事件时，先加2，再减两秒后为1，而addNumber事件无法实现异步效果。以上就是本文的全部内容，希望对大家的学习有所帮助。
