<script>
/* store.js */
import Vue from 'vue'
import Vuex from 'vuex'
// 告诉 vue 使用 vuex
Vue.use(Vuex)
// 创建一个对象保存初始状态
let state = {
count: 0
}
// getters 可以认为是store的计算属性
// 第一个参数 state
let getters = {
name: state => state.count + '- 小花'
}
// 创建store
const store = new Vuex.Store({
state,
getters
})
export {store}
</script>
<!-- teacher.vue -->
<template>
<div>
<Search></Search>
</div>
</template>
<script>
import {store} from './store.js'
import Search from './search.vue'
export default {
// store 提供给 store 选项 可以把store的实例注入到所有的子组件
store,
components: {
Search
}
}
</script>
<!-- search.vue -->
<template>
<div class="search">
<p>{{name}}</p>
</div>
</template>
<script>
export default {
computed: {
name () {
// this.$store.getters 获取 getters 对象
return this.$store.getters.name
}
}
}
</script>