vuex的基本使用

1. 首先先创建一个store.js

安装vue,vuex什么的就不说了

这是一个仓库

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

Vue.use(Vuex)
//装载数据的一个仓库
const state = {
    count: 1
}
//修改仓库的方法
const mutations={
    add(state){
        state.count++
    },
    reduce(state){
        state.count--
    }
}
//暴露一个对象
export default new Vuex.Store({
    state,mutations
})

2. 创建一个Count.vue
   这个组件使用store仓库

<template>
  <div>
      <h3>{{$store.state.count}}</h3>
      <hr/>
      <p>
          <button @click="$store.commit('add')">+</button>
          <button @click="$store.commit('reduce')">-</button>
      </p>
  </div>
</template>

<script>
//引入仓库
import store from '@/vuex/store'
export default {
    data(){
        return{
            msg:"hello vuex"
        }
    },
    //注册仓库
    store
}
</script>
<style>
</style>

3. 在主页面中使用就可以实现一个加减的效果
   
   代码中需要注意的点用“//”标注了出来