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 相关文章推荐
DOM_window对象属性之--clipboardData对象操作代码
Feb 03 Javascript
一些主流JS框架中DOMReady事件的实现小结
Feb 12 Javascript
jquery缓动swing liner控制动画过程不同时刻的速度
May 29 Javascript
javascript浏览器兼容教程之事件处理
Jun 09 Javascript
js实现同一页面可多次调用的图片幻灯切换效果
Feb 28 Javascript
javaScript知识点总结(必看篇)
Jun 10 Javascript
AngularJS实现单独作用域内的数据操作
Sep 05 Javascript
利用Vue.js框架实现火车票查询系统(附源码)
Feb 27 Javascript
Angular6中使用Swiper的方法示例
Jul 09 Javascript
Javascript实现鼠标移入方向感知
Jun 24 Javascript
Node 使用express-http-proxy 做api网关的实现
Oct 15 Javascript
uniapp开发小程序的经验总结
Apr 08 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脚本的10个技巧(4)
2006/10/09 PHP
mysql_fetch_assoc和mysql_fetch_row的功能加起来就是mysql_fetch_array
2007/01/15 PHP
php利用新浪接口查询ip获取地理位置示例
2014/01/20 PHP
完美实现wordpress禁止文章修订和自动保存的方法
2014/11/03 PHP
ExtJS实现文件下载的方法实例
2013/11/09 Javascript
js取值中form.all和不加all的区别介绍
2014/01/20 Javascript
js字符串操作方法实例分析
2015/05/06 Javascript
Angularjs 制作购物车功能实例代码
2016/09/14 Javascript
vuejs通过filterBy、orderBy实现搜索筛选、降序排序数据
2020/10/26 Javascript
JavaScript基础之this详解
2017/06/04 Javascript
基于jQuery和CSS3实现APPLE TV海报视差效果
2017/06/16 jQuery
详解vue中computed 和 watch的异同
2017/06/30 Javascript
详解使用PM2管理nodejs进程
2017/10/24 NodeJs
微信小程序如何修改radio和checkbox的默认样式和图标
2019/07/24 Javascript
layui前端时间戳转化实例
2019/11/15 Javascript
JavaScript实现滚动加载更多
2020/12/27 Javascript
python里大整数相乘相关技巧指南
2014/09/12 Python
python安装cx_Oracle模块常见问题与解决方法
2017/02/21 Python
Python实现获取磁盘剩余空间的2种方法
2017/06/07 Python
在Pycharm中项目解释器与环境变量的设置方法
2018/10/29 Python
Django Admin中增加导出CSV功能过程解析
2019/09/04 Python
使用Python+selenium实现第一个自动化测试脚本
2020/03/17 Python
Django设置Postgresql的操作
2020/05/14 Python
Python实现查找数据库最接近的数据
2020/06/08 Python
浅析Python迭代器的高级用法
2020/07/16 Python
Django3中的自定义用户模型实例详解
2020/08/23 Python
Python通过递归函数输出嵌套列表元素
2020/10/15 Python
美丽的现代设计家具:2Modern
2018/07/26 全球购物
Reformation官网:美国女装品牌
2018/09/14 全球购物
Bluebella法国官网:英国性感内衣品牌
2019/05/03 全球购物
测试工程师职业规划书
2014/02/06 职场文书
2014院党委领导班子及其成员群众路线对照检查材料思想汇报
2014/10/04 职场文书
房屋授权无偿使用证明
2014/11/29 职场文书
计划生育工作总结2015
2015/04/03 职场文书
宇宙与人观后感
2015/06/05 职场文书
幼儿园中班教育随笔
2015/08/14 职场文书