（实战项目篇）vue3.0系列（vue2.6-cli3.x）使用vuex

第一种方式:直接挂载到vue上

store.js

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

// 引用 Vuex插件
Vue.use(Vuex)

// 将home相关的状态抽取为一个模块
const home = {
    state: {// 存放状态（共享属性）
        count: 1
    },

    // 改变 state状态值
    mutations: {
        increment(state, n) { // n为载荷
            // state.count ++ 
            state.count += n // state.count = state.count+n
        },
        decrement(state) {
            state.count --
        }
    },

    actions: {
        add(context, n) {
            // 触发 mutations 里面的 increment 来改变state
            context.commit('increment', n)
        },
        decrement({commit, state}) { // 按需传入
            console.log('actions.decrement.sate.count', state.count)
            commit('decrement')
        }
    },

    // 派生属性
    getters: {
        desc(state) {
            if(state.count<50) {
                return '吃饭'
            }else if(state.count < 100) {
                return '睡觉'
            }else {
                return '打豆豆'
            }
        }
    }
}
const goods = {
    state: {

    },
    mutations: {

    },
    actions: {

    },
    getters: {
        
    }
}

const store = new Vuex.Store({
    modules: {
        home, // home: home
        goods
    }
    
})
export default store

import Vue from "vue";
import App from "./App.vue";
import router from "./router";
// 默认导入的 是 ./store/index.js
import store from './store'

Vue.config.productionTip = false;

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount("#app");

<template>
  <div>
    <!-- count: {{ $store.state.count }} -->
    count: {{ $store.state.home.count}}
    <button @click="addCount">加法</button>
    <button @click="decrement">减法</button>
    派生属性desc: {{ $store.getters.desc }}
  </div>
</template>
<script>
export default {
  methods: {
    addCount() {
      // 获取状态值
      console.log(this.$store.state.home.count)
      // this.$store.commit('increment', 10)
      // 触发action修改state
      this.$store.dispatch('add', 10)
    },
    decrement() {
      // this.$store.commit('decrement')
      this.$store.dispatch('decrement')
    }
  }
}
</script>