第一个Demo
store文件
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
strict: false,
state: {
count: 1
},
mutations: {
increase () {
this.state.count++
}
},
actions: {
},
modules: {
}
})
加1的文件
<template>
<div class="list">
<h1>This is an List page</h1>
<button @click="add()" > 加加{{msg}} </button>
</div>
</template>
<script>
import store from '@/store/index'
export default {
name: 'list',
data () {
return {
msg: 'ddddddddddddd'
}
},
methods: {
add () {
console.log('aa')
store.commit('increase') // 传递给store文件的increase方法
}
}
}
</script>
显示count的文件
<template>
<div class="about">
<h1>This is an about page</h1>
<p> {{ msg }} </p>
</div>
</template>
<script>
export default {
name: 'about',
data () {
return {
msg: this.$store.state.count
}
}
}
</script>
或者
<template>
<div class="about">
<h1>This is an about page</h1>
<p> {{ msg }} </p>
</div>
</template>
<script>
import store from '@/store/index'
export default {
name: 'about',
store: store,
data () {
return {
msg: store.state.count
}
}
}
</script>