最简单新手vuex案例（一）

 本人写的小程序，功能还在完善中，欢迎扫一扫提出宝贵意见！

               

如果你是新手还不会搭建vue项目，请点击立即跳转查看如何搭建vue项目。

 

第一步：安装

安装vuex：npm install vuex --save
安装Element-ui：npm i element-ui -S

第二步：创建文件夹，并且写入内容如下：

 第三步：在mian.js 引入vuex和Element即可

  

 第四步：页面上只用vuex的值

  

五、全部代码如下所示：

 1、使用页面代码：

<template>
  <div class="hello">
    <h2>加减法计算器</h2>
    <div>
        <el-input-number v-model="num" @change="handleChange" :min="1"></el-input-number>
    </div>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      num:this.$store.state.num
    }
  }
}
</script>

2、main.js全部代码

import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI)
Vue.config.productionTip = false

new Vue({
    el: '#app',
    router,
    store,
    components: { App },
    template: '<App/>'
})

3、store文件下的index.js全部代码

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

let store = new Vuex.Store({
    state: {
        num: 100
    }
})

export default store