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 相关文章推荐
javascript获取web应用根目录的方法
Feb 12 Javascript
jquery实现将获取的颜色值转换为十六进制形式的方法
Dec 20 Javascript
有关easyui-layout中的收缩层无法显示标题的解决办法
May 10 Javascript
关于动态生成dom绑定事件失效的原因及解决方法
Aug 06 Javascript
深入理解JavaScript中的尾调用(Tail Call)
Feb 07 Javascript
微信小程序 动态绑定事件并实现事件修改样式
Apr 13 Javascript
简单理解Vue中的nextTick方法
Jan 30 Javascript
webpack4.0打包优化策略整理小结
Mar 30 Javascript
React diff算法的实现示例
Apr 20 Javascript
详解Vue.js iview实现树形权限表(可扩展表)
Sep 30 Javascript
微信小程序自定义弹窗滚动与页面滚动冲突的解决方法
Jul 16 Javascript
Vue3.0中Ref与Reactive的区别示例详析
Jul 07 Vue.js
详解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
thinkphp视图模型查询提示ERR: 1146:Table 'db.pr_order_view' doesn't exist的解决方法
2014/10/30 PHP
smarty模板引擎从配置文件中获取数据的方法
2015/01/22 PHP
php面试中关于面向对象的相关问题
2019/02/13 PHP
解决laravel查询构造器中的别名问题
2019/10/17 PHP
我也种棵OO树JXTree[js+css+xml]
2007/04/02 Javascript
javascript 有趣而诡异的数组
2009/04/06 Javascript
在JavaScript里嵌入大量字符串常量的实现方法
2013/07/07 Javascript
jquery实现页面图片等比例放大缩小功能
2014/02/12 Javascript
在JavaScript中操作时间之getYear()方法的使用教程
2015/06/11 Javascript
jQuery左侧大图右侧小图焦点图幻灯切换代码分享
2015/08/19 Javascript
js生成随机数的过程解析
2015/11/24 Javascript
JavaScript jquery及AJAX小结
2016/01/24 Javascript
jquery实现的判断倒计时是否结束代码
2016/02/05 Javascript
手机图片预览插件photoswipe.js使用总结
2016/08/25 Javascript
vue.js入门教程之基础语法小结
2016/09/01 Javascript
JS取模、取商及取整运算方法示例
2016/10/13 Javascript
使用nodejs下载风景壁纸
2017/02/05 NodeJs
JS实现点击循环切换显示内容的方法
2017/10/19 Javascript
基于Vuex无法观察到值变化的解决方法
2018/03/01 Javascript
Vue项目报错:Uncaught SyntaxError: Unexpected token
2018/11/10 Javascript
ant-design-vue按需加载的坑的解决
2020/05/14 Javascript
使用python Django做网页
2013/11/04 Python
Python BeautifulSoup中文乱码问题的2种解决方法
2014/04/22 Python
Python的净值数据接口调用示例分享
2016/03/15 Python
python实现AES加密与解密
2019/03/28 Python
python3-flask-3将信息写入日志的实操方法
2019/11/12 Python
使用darknet框架的imagenet数据分类预训练操作
2020/07/07 Python
python3 使用ssh隧道连接mysql的操作
2020/12/05 Python
python 对xml解析的示例
2021/02/27 Python
HTML5+CSS3:3D展示商品信息示例
2017/01/03 HTML / CSS
陈欧的广告词
2014/03/18 职场文书
大学竞选班干部演讲稿
2014/08/21 职场文书
2014学校领导四风问题对照检查材料思想汇报
2014/09/22 职场文书
催款律师函范文
2015/05/27 职场文书
忠犬八公的故事观后感
2015/06/05 职场文书
小程序实现文字循环滚动动画
2021/06/14 Javascript