文档
vuex官网
5分钟带你入门vuex(vue状态管理)
vuex基本入门
安装
cnpm install vuex --save
在src中传教 store/index.js
// 引入vue和Vuex
import Vue from 'vue'
import Vuex from 'vuex'
// 引入之后,对vuex进行引用
Vue.use(Vuex)
// 创建Vuex实例
const store = new Vuex.Store({
state: {
count: 1
}
})
export default store
在main.js中引入vuex
// 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 ElementUI from 'element-ui' // 1-element-ui
import 'element-ui/lib/theme-chalk/index.css' // 1-element-ui
import App from './App'
import router from './router'
import store from './store' // 2-Vuex
Vue.use(ElementUI) // 1-element-ui
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
store, // 2-Vuex
router,
components: { App },
template: '<App/>'
})
修改HelloWorld.vue
<template>
<el-row>
<el-button type="primary" icon="el-icon-edit" @click="click()" circle></el-button>
</el-row>
</template>
<script>
export default {
data () {
return {
value: null
}
},
methods: {
click () {
alert(this.$store.state.count)
}
}
}
</script>