资讯专栏INFORMATION COLUMN

小白文,关于vuejs中的vuex计数小示例

philadelphia / 2393人阅读

摘要:学习,那么必不可少的需要需要,仓库管理。但是在看官方文档的时候,小白可能会遇到一个问题,就是在对着做计数示例的时候报各种错。运行,正常然后安装,安装好了以后引入,我们以最简单的引入方式为例在目录下创建目录。

学习vuejs,那么必不可少的需要需要vuex,仓库管理。但是在看官方文档的时候,小白可能会遇到一个问题,就是在对着做计数示例的时候报各种错。具体如下:
首先,参考官方vuejs安装教程,使用npm安装vue。运行npm run dev,正常
然后npm i vuex --save安装vuex,安装好了以后引入,我们以最简单的引入方式为例:
在src目录下创建store目录。并创建index.js文件,index.js文件如下:

import Vue from "vue"
import Vuex from "vuex"

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    // 增加
    increment (state) {
      state.count ++
    },
    // 减少
    decrement (state) {
      state.count --
    }
  }
})

目录如下:

然后在入口文件main.js引入store

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from "vue"
import App from "./App"
import router from "./router"
import store from "./store"

Vue.config.productionTip = false

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

好了。引入sotre成功了。接下来在componets的vue文件中使用:




在这里会遇到一些问题,如下:

这个是因为在return前面有空格。因为在开始npm安装项目的时候,安装了eslint。对代码要求比较严格。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/90672.html

相关文章

  • Vue.js学习

    摘要:一基础学习模式下图不仅概括了模式,还描述了在中是如何和以及进行交互的。关于这一点我们将在后续反应系统中讨论。父组件通过向下传递数据给子组件,子组件通过给父组件发送消息。这个对象必须是普通对象原生对象,及原型属性会被忽略。 Vue.js 是用于构建交互式的 Web 界面的库。Vue.js 提供了 MVVM 数据绑定和一个可组合的组件系统,具有简单、灵活的 API。 其实和Jquery一样...

    TIGERB 评论0 收藏0
  • 【收藏】2019年最新Vue相关精品开源项目库汇总

    摘要:前言本文的前身是源自上的项目但由于该项目上次更新时间为年月日,很多内容早已过期或是很多近期优秀组件未被收录,所以小肆今天重新更新了内容并新建项目。提交的项目格式如下项目名称子标题相关介绍如果收录的项目有错误,可以通过反馈给小肆。 前言 本文的前身是源自github上的项目awesome-github-vue,但由于该项目上次更新时间为2017年6月12日,很多内容早已过期或是很多近期优...

    williamwen1986 评论0 收藏0
  • 关于Vue2一些值得推荐的章 -- 五、六月份

    摘要:五六月份推荐集合查看最新的请点击集前端最近很火的框架资源定时更新,欢迎一下。苏幕遮燎沈香宋周邦彦燎沈香,消溽暑。鸟雀呼晴,侵晓窥檐语。叶上初阳乾宿雨,水面清圆,一一风荷举。家住吴门,久作长安旅。五月渔郎相忆否。小楫轻舟,梦入芙蓉浦。 五、六月份推荐集合 查看github最新的Vue weekly;请::点击::集web前端最近很火的vue2框架资源;定时更新,欢迎 Star 一下。 苏...

    sutaking 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<