Web前端vue必做笔记:vuex基本使用（一）

Web前端vue必做笔记:vuex基本使用（一）

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

状态管理模式到底是什么？
可以简单的将其看成把需要多个组件共享的变量全部存储在一个对象里面
然后，将这个对象放在顶层的Vue实例中，让其他组件可以使用
那么，多个组件是不是就可以共享这个对象中的所有变量属性了呢？

如果是这样的话，为什么官方还要专门出一个插件Vuex呢，难道我们不能自己封装一个对象来管理吗？

这是当然可以的，只是我们要谢谢VueJs带给我们最大的便利是什么呢？ 没错，就是响应式。
Vuex还是响应式的
一旦Vuex中的数据发生改变的时候，界面自动会刷新发生改变

那管理什么状态呢

如果你做过大型开发，一定遇到过多个状态，在多个界面间的共享问题
比如用户的登录状态，用户名称，头像等
商品的收藏，购物车中的物品等
这些状态信息，都可以放在统一的地方进行保存和管理，而且它们还是响应式的

首先安装好vuex

npm install vuex --save

在src文件夹下创建好store以及vuex所需的js文件
index.js相当于vuex的主目录，文件都在index.js文件引入

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

Vue.use(Vuex);

import state from './state';
import mutations from './mutations';
import * as actions from './actions';
import * as getters from './getters';
 

 
export default new Vuex.Store({
  state,       
  getters,     
  actions,     
  mutations    
  
});

在main.js中引入

import Vue from 'vue'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue'
import router from './router'
import axios from 'axios'
import store from './store'

Vue.config.productionTip = false

Vue.use(ElementUI);

Vue.prototype.$axios = axios;


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