摘要:学习,那么必不可少的需要需要,仓库管理。但是在看官方文档的时候,小白可能会遇到一个问题,就是在对着做计数示例的时候报各种错。运行,正常然后安装,安装好了以后引入,我们以最简单的引入方式为例在目录下创建目录。
学习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文件中使用:
{{ count }}
在这里会遇到一些问题,如下:
这个是因为在return前面有空格。因为在开始npm安装项目的时候,安装了eslint。对代码要求比较严格。
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/90672.html
摘要:前言本文的前身是源自上的项目但由于该项目上次更新时间为年月日,很多内容早已过期或是很多近期优秀组件未被收录,所以小肆今天重新更新了内容并新建项目。提交的项目格式如下项目名称子标题相关介绍如果收录的项目有错误,可以通过反馈给小肆。 前言 本文的前身是源自github上的项目awesome-github-vue,但由于该项目上次更新时间为2017年6月12日,很多内容早已过期或是很多近期优...
摘要:五六月份推荐集合查看最新的请点击集前端最近很火的框架资源定时更新,欢迎一下。苏幕遮燎沈香宋周邦彦燎沈香,消溽暑。鸟雀呼晴,侵晓窥檐语。叶上初阳乾宿雨,水面清圆,一一风荷举。家住吴门,久作长安旅。五月渔郎相忆否。小楫轻舟,梦入芙蓉浦。 五、六月份推荐集合 查看github最新的Vue weekly;请::点击::集web前端最近很火的vue2框架资源;定时更新,欢迎 Star 一下。 苏...
阅读 3076·2021-10-13 09:40
阅读 3902·2021-09-22 15:51
阅读 1470·2021-09-22 15:48
阅读 1035·2021-09-06 15:00
阅读 1777·2019-08-30 15:43
阅读 2340·2019-08-29 18:35
阅读 1637·2019-08-29 16:18
阅读 3579·2019-08-29 12:49