npm install vuex --save
一、新建store/index.js
import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex)
const store = new Vuex.Store({
state: {
count: 0
},
mutations: {
increment (state) {
state.count++
}
}
})
export default store
二、main.js
// 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 Vuex from 'vuex'
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,
components: { App },
template: '<App/>'
})
三、 index.vue中使用
<template> <div @click="increment">{{ count }} </div> </template> <script> export default { name: "index.vue", data() { return { count: 0 } }, methods: { increment() { this.$store.commit('increment') this.count=this.$store.state.count } } } </script> <style scoped> </style>