学习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: '<App/>',
components: { App }
})
好了。引入sotre成功了。接下来在componets的vue文件中使用:
<template>
<div class="hello">
<p>{{ count }}</p>
<p>
<button @click="increment">+</button>
<button @click="decrement">-</button>
</p>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
computed: {
count () {
return this.$store.state.count
}
},
methods: {
// 数字增加,同时改变store中的状态
increment () {
this.$store.commit('increment')
},
// 数字减少,同时改变store中的状态
decrement () {
this.$store.commit('decrement')
}
}
}
</script>
在这里会遇到一些问题,如下:
这个是因为在return前面有空格。因为在开始npm安装项目的时候,安装了eslint。对代码要求比较严格。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。