在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项目中添加高德地图,对开发地图的开发人员有一定帮助,下面这篇文章主要给大家介绍了关于vue项目中使用高德地图的超详细步骤,文中通过图文以及实例代码介绍的非常详细,需要的朋友可以参考下2023-03-03
这篇文章主要介绍了vue实现密码显示隐藏切换功能,需要的朋友可以参考下2018-02-02
今天小编就为大家分享一篇vue-cli项目无法用本机IP访问的解决方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
vant-ui框架的一个bug(解决切换后onload不触发)
这篇文章主要介绍了vant-ui框架的一个bug(解决切换后onload不触发)，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-11-11
这篇文章主要为大家介绍了vue.js前端网页弹框异步的行为示例分析，有需要的朋友可以借鉴参考下，希望能够有所帮助祝大家多多进步，早日升职加薪2021-11-11
Vue-loader 是 Webpack 的加载模块，它使我们可以用 Vue 文件格式编写单文件组件。这篇文章主要介绍了Vue.js的高级面试题以及答案,需要的朋友可以参考下2020-01-01
vue3 watch和watchEffect的使用以及有哪些区别
这篇文章主要介绍了vue3 watch和watchEffect的使用以及有哪些区别，帮助大家更好的理解和学习vue框架，感兴趣的朋友可以了解下2021-01-01
这篇文章主要为大家介绍了vue 指令版富文本溢出省略截取示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-09-09
这篇文章主要介绍了vue级联选择器的getCheckedNodes使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-04-04
这篇文章主要给大家介绍了关于vue使用dagre-d3画流程图的完整代码,dagre-d3.js是一个用于在Vue.js框架中实现DAG（有向无环图）可视化的库,它结合了vue.js、dagre和d3.js这三个库的功能,需要的朋友可以参考下2024-02-02
最新评论