【Vue课序3】保姆级：实现Vue + Vuex 的状态管理

一、什么是 Vuex

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

---

二、安装 Vuex

通过npm安装：

npm install vuex —save

通过yarn安装：

yarn add vuex

---

三、用全局store来管理状态

拿刚刚完成的HelloWorld.vue来体验Vuex的状态管理，步骤：
1.在src/下创建store.js，在vuex中我们需要保存的数据就在state中

this.$store.state // 在页面组件的methods中，进行抓取store中的数据

import Vue from 'vue' // 引入 vue
import Vuex from 'vuex' // 引入vuex

// 使用Vuex
Vue.use(Vuex);

// 创建并导出Vuex实例
export default new Vuex.Store({
    
    state: {
        count:0 // 我们用 count来标记状态
    }
});

2.修改main.js，将 store注册到全局

import Vue from 'vue'
import App from './App'
import router from './router'
// 引入store树
import store from './store.js'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
    el: '#app',
    router,
    store, // 注册到全局
    components: { App },
    template: ''
})

3.修改HelloWorld.vue中的