最簡單新手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