少废话,先出东西 vuex
main.js
import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store'
Vue.config.productionTip = falsenew Vue({el: '#app',router,store,render: xx=>xx(App)
})
store.js 平级目录未建文件夹
import Vue from 'vue'
import Vuex from 'vuex'Vue.use(Vuex)//访问状态对象
const state = {count : 4
}
//访问触发状态
const mutations = {jia(state) {state.count ++},jian(state) {state.count --}
}export default new Vuex.Store({state,mutations
})
<template><div id="app"><h1>hello world</h1><h1>{{ this.$store.state.count }}</h1><button @click="$store.commit('jia')">count + 1</button><button @click="$store.commit('jian')">count - 1</button><!-- <router-view></router-view> --></div>
</template>