脚本宝典收集整理的这篇文章主要介绍了小白文，关于vuejs中的vuex计数小示例，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

学习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。对代码要求比较严格。

脚本宝典总结

以上是脚本宝典为你收集整理的小白文，关于vuejs中的vuex计数小示例全部内容，希望文章能够帮你解决小白文，关于vuejs中的vuex计数小示例所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。