vuex 解决报错this.$store.commit is not a function的方法


Posted in Javascript onDecember 17, 2018

Vue的项目中,如果项目简单, 父子组件之间的数据传递可以使用 props 或者 $emit 等方式 进行传递

但是如果是大中型项目中,很多时候都需要在不相关的平行组件之间传递数据,并且很多数据需要多个组件循环使用。这时候再使用上面的方法会让项目代码变得冗长,并且不利于组件的复用,提高了耦合度。

Vue 的状态管理工具 Vuex 完美的解决了这个问题。

看了下vuex的官网,觉得不是很好理解,有的时候我们只是需要动态的从一个组件中获取数据(官网称为“组件层级”:是个独立的控件,作用范围只在组件之内)然后想放到一个被官网称作“应用层级”(在项目的任意地方都可以随时获取和动态的修改,在修改之后,vue会为你的整个项目做更新)的地方。这是我最初来学习vue的原因,我并不想做一个前端数据结构库。。。

下面看看我一步一步的小例子

首先安装vuex 目前公司项目已经被我从vue1.0迁移到vue2.0,下载并安装vue

npm install vuex --save

然后在index.html同级新建文件夹store,在文件夹内新建index.js文件,这个文件我们用来组装模块并导出 store 的文件

【一、获取store中的数据】

import Vue from 'vue'
import Vuex from 'vuex'

// 告诉 vue “使用” vuex
Vue.use(Vuex)

// 创建一个对象来保存应用启动时的初始状态
// 需要维护的状态
const store = new Vuex.Store({
 state: {
  // 放置初始状态 app启动的时候的全局的初始值
  bankInf: {"name":"我是vuex的第一个数据","id":100,"bankName":"中国银行"}
 }
})
// 整合初始状态和变更函数,我们就得到了我们所需的 store
// 至此,这个 store 就可以连接到我们的应用中
export default store

在vue根文件中注册store,这样所有的组件都可以使用store中的数据了

我的项目文件结构:

vuex 解决报错this.$store.commit is not a function的方法

在main.js文件中注册store

import Vue from 'vue'
import App from './App'
import router from './router'
import store from './../store/index'

/* eslint-disable no-new */
new Vue({
 el: '#app',
 router,
 store,
 template: '<App/>',
 components: { App }
})

这样简单的第一步就完成了,你可以再任意组件中使用store中的数据,使用方法也很简单,就是使用计算属性返回store中的数据到一个新属性上,然后在你模板中则可以使用这个属性值了:

任意组件中:

export default {
 ...
 computed: {
  bankName() {
   return this.$store.state.bankInf.bankName;
  }
 },
 ...
}

在模板中可以直接使用bankName这个属性了,也就是store中的中国银行

【二、在组件中修改store中的状态 】

在任意组件中添加html模板

<div class="bank">
  <list-header :headerData="bankName"></list-header>
  04银行详情页面
  <input name="" v-model="textValue">
  <button type="button" name="获取数据" @click="newBankName"></button>
</div>

然后组件中提交mutation

export default {
 ...
 computed: {
  bankName() {
   return this.$store.state.bankInf.bankName;
  }
 },
 methods: {
  newBankName: function() {
   this.$store.commit('newBankName', this.textValue)
  }
 }
 ...  
}

在store中的index.js中添加mutations:

const store = new Vuex.Store({
 state: {
  // 放置初始状态 app启动的时候的全局的初始值
  bankInf: {"name":"我是vuex的第一个数据","id":100,"bankName":"中国银行"},
  count:0
 },
 mutations: {
  newBankName(state,msg) {
   state.bankInf.bankName = msg;
  }
 }
})

这样你发现,在点击提交按钮的时候,页面已经显示你修改的数据了,并且所有复用这个组件的地方的数据全都被vue更新了;

如果在使用中发现报错this.$store.commit is not a function ,请打开你项目的配置文件package.json,查看你正在使用的vuex的版本,我正在使用的是vuex2.0,

如果想删除旧版本的vuex并安装新版本的vuex请使用

npm rm vuex --save

然后安装最新的vuex

npm install vuex --save

即可解决这个错误,或者是查看vuex官网api修改提交mutation的语句

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Gird事件机制初级读本
Mar 10 Javascript
JavaScript String.replace函数参数实例说明
Jun 06 Javascript
document.execCommand()的用法小结
Jan 08 Javascript
jquery得到iframe src属性值的方法
Sep 25 Javascript
js对象的复制继承实例
Jan 10 Javascript
使用javascript实现判断当前浏览器
Apr 14 Javascript
跟我学习javascript的严格模式
Nov 16 Javascript
jQuery Mobile 触摸事件实例
Jun 04 Javascript
JavaScript中实现键值对应的字典与哈希表结构的示例
Jun 12 Javascript
jQuery中clone()函数实现表单中增加和减少输入项
May 13 jQuery
jQuery 实现图片的依次加载图片功能
Jul 06 jQuery
vue2实现搜索结果中的搜索关键字高亮的代码
Aug 29 Javascript
详解Vue This$Store总结
Dec 17 #Javascript
vue + element-ui的分页问题实现
Dec 17 #Javascript
Vue 中的受控与非受控组件的实现
Dec 17 #Javascript
js实现移动端轮播图
Dec 21 #Javascript
微信小程序登录按钮遮罩浮层效果的实现方法
Dec 16 #Javascript
微信小程序 JS动态修改样式的实现方法
Dec 16 #Javascript
Echart折线图手柄触发事件示例详解
Dec 16 #Javascript
You might like
PHP SPL标准库之数据结构堆(SplHeap)简单使用实例
2015/05/12 PHP
PHP的运行机制与原理(底层)
2015/11/16 PHP
PHP输出XML格式数据的方法总结
2017/02/08 PHP
PHP替换Word中变量并导出PDF图片的实现方法
2020/11/26 PHP
关于COOKIE个数与大小的问题
2011/01/17 Javascript
js+css使DIV始终居于屏幕中间 左下 左上 右上 右下的代码集合
2011/03/10 Javascript
google jQuery 引用文件,jQuery 引用地址集合(jquery 1.2.6至jquery1.5.2)
2011/04/24 Javascript
table对象中的insertRow与deleteRow使用示例
2014/01/26 Javascript
原生javascript实现图片弹窗交互效果
2015/01/12 Javascript
不能不知道的10个angularjs英文学习网站
2016/03/23 Javascript
JS基于构造函数实现的菜单滑动显隐效果【测试可用】
2016/06/21 Javascript
详解js实现线段交点的三种算法
2016/08/09 Javascript
最通俗易懂的javascript变量提升详解
2017/08/05 Javascript
node.js 利用流实现读写同步,边读边写的方法
2017/09/11 Javascript
用Webpack构建Vue项目的实践
2017/11/07 Javascript
监控微信小程序中的慢HTTP请求过程详解
2019/07/05 Javascript
layer.prompt输入层的例子
2019/09/24 Javascript
layui table 列宽百分比显示的实现方法
2019/09/28 Javascript
js实现3D旋转效果
2020/08/18 Javascript
vue 获取url参数、get参数返回数组的操作
2020/11/12 Javascript
python使用7z解压apk包的方法
2015/04/18 Python
进一步探究Python中的正则表达式
2015/04/28 Python
Django网络框架之创建虚拟开发环境操作示例
2019/06/06 Python
django框架模型层功能、组成与用法分析
2019/07/30 Python
利用Python的sympy包求解一元三次方程示例
2019/11/22 Python
python 5个实用的技巧
2020/09/27 Python
HTML5视频支持检测(检查浏览器是否支持视频播放)
2013/06/08 HTML / CSS
HTML5在a标签内放置块级元素示例代码
2013/08/23 HTML / CSS
WWE美国职业摔角官方商店:WWE Shop
2018/11/15 全球购物
德国前卫设计师时装在线商店:Luxury Loft
2019/11/04 全球购物
Unix如何添加新的用户
2014/08/20 面试题
企业理念标语
2014/06/09 职场文书
2015年预防青少年违法犯罪工作总结
2015/05/22 职场文书
2015年税务稽查工作总结
2015/05/26 职场文书
CSS实现漂亮的时钟动画效果的实例代码
2021/03/30 HTML / CSS
我的收音机情缘
2022/04/05 无线电