官方网站 https://vuex.vuejs.org/zh/
npm install vuex -S
在项目的src目录下新建一个目录store,在该目录下新建一个index.js文件,我们用来创建vuex实例,然后在该文件中引入vue和vuex,创建Vuex.Store实例保存到变量store中,最后使用export default导出store:
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
},
mutations: {
},
actions: {
}
})
在main.js文件中引入该文件,在文件里面添加 import store from ‘./store’;,再在vue实例全局引入store对象;
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
Vue.config.productionTip = false
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
vuex中的数据源,我们需要保存的数据就保存在这里,可以在页面通过 this.$store.state来获取我们定义的数据;
创建store目录 在新创建的store目录下创建index.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
count: 0,
num: 1
},
mutations: {
increment(state, num) {
state.count++
state.num = num
}
},
actions: {
inc({commit}, obj) {
commit('increment', obj)
}
}
})
在main.js 导入store
import store from './store'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
store,
components: { App },
template: '<App/>'
})
设置数据和获取数据
<template>
<div>
{{msg}}
<button @click="change">change</button>
</div>
</template>
<script>
export default {
name: "HelloVuex",
data(){
return{
msg:234
}
},
methods:{
change(){
this.$store.dispatch('inc',100)
this.msg = this.$store.state.num;
}
}
}
</script>