在Vue-cli里应用Vuex的state和mutations方法
更新时间：2018年09月16日 15:56:06 作者：oxgos
今天小编就为大家分享一篇在Vue-cli里应用Vuex的state和mutations方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
首先，必须安装vuex的依赖
npm install vuex --save-dev
创建专属vuex的文件夹和store.js:
store.js里引入并应用插件vuex
定义常量state,用于存放变量&&定义常量mutations存放对变量的处理方法：
导出Vuex.store的实例，参数为刚才定义的state和mutations:
最后，还要在入口js文件引入到Vue的实例之中：
之后，我们就可以在组件当中，调用到我们在vuex存放的变量和方法：
首先：在父组件调用变量headTitle:
需要用到计算属性computed和vuex的mapState:(注释的写法也可以，但是mapState可以引入多个变量，比较方便)
这样，页面<h1>就会显示我们保存的变量headTitle的值为“口袋香港”
之后，我尝试在子组件，利用mutations的方法去改变headTitle的值：
结果，每次的改变，父组件的<h1>都会跟随改变。
这就是vuex的小小的应用实现。
以上这篇在Vue-cli里应用Vuex的state和mutations方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了vue+高德地图写地图选址组件的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-05-05
这篇文章主要介绍了vue+iview框架实现左侧动态菜单功能，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2020-07-07
Vue.js是一款流行的JavaScript前端框架,很受用户喜爱,这篇文章主要介绍了vue3图片剪裁插件vue-img-cutter使用小结,本文结合示例代码讲解的非常详细,感兴趣的朋友一起看看吧2024-01-01
这篇文章主要给大家介绍了关于vue中v-bind与v-model区别的相关资料,v-model和v-bind是Vue.js框架中的两个常用指令,文中通过图文介绍的非常详细,需要的朋友可以参考下2023-09-09
这篇文章主要介绍了vscode 开发Vue项目的方法步骤，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-11-11
vue,angular,avalon这三种MVVM框架优缺点
本文给大家具体分析了下vue,angular,avalon这三种MVVM框架优缺点，十分的细致全面，有需要的小伙伴可以参考下2016-04-04
el-descriptions引入代码中label不生效问题及解决
这篇文章主要介绍了el-descriptions引入代码中label不生效问题及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-12-12
这篇文章主要介绍了vue - props 声明数组和对象操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-07-07
Vue的filters过滤器是比较常见的一个知识点，下面我将结合时间戳转换的例子带你快速了解filters的用法，感兴趣的朋友一起看看吧2021-09-09
vue-cli3项目生产和测试环境分包后文件名和数量不一致解决
这篇文章主要为大家介绍了vue-cli3项目生产和测试环境分包后文件名和数量不一致解决方法，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-05-05
最新评论