<script>
                /* store.js */

                import Vue from 'vue'
                import Vuex from 'vuex'

                // 告诉 vue 使用 vuex
                Vue.use(Vuex)

                // 创建一个对象保存初始状态
                let state = {
                  count: 0
                }

                // 变更函数
                let mutations = {
                  // 通过变更函数修改状态
                  increment: state => state.count++,
                  decrement: state => state.count--
                }

                // 创建store
                const store = new Vuex.Store({
                  state,
                  mutations
                })

                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>{{count}}</p>
            <p>
              <button @click="increment">+</button>
              <button @click="decrement">-</button>
            </p>
          </div>
        </template>

        <script>
            export default {
              computed: {
                count () {
                  // this.$store 获取 store 对象
                  return this.$store.state.count
                }
              },
              methods: {
                increment () {
                  // commit 触发 mutations对象的方法 修改state中的状态
                  this.$store.commit('increment')
                },
                decrement () {
                  this.$store.commit('decrement')
                }
              }
            }
        </script>