一、vuex是什么

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

每一个 Vuex 应用的核心就是 store（仓库），可以简单的将其看成把需要多个组件共享的变量全部存储在一个对象里面，然后，将这个对象放在顶层的Vue实例中，让其他组件可以使用。

举个例子：比如用户的登录状态、用户名称、头像、地理位置信息等等。比如商品的收藏、购物车中的物品等等。这些状态信息，我们都可以放在统一的地方，对它进行保存和管理，而且它们还是响应式的。

二、核心概念

每一个 Vuex 应用的核心就是 store（仓库）。“store”基本上就是一个容器，它包含着你的应用中大部分的状态 (state)。

Vuex 和单纯的全局对象有以下两点不同（重点）：
1、Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。
2、你不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状态的变化，从而让我们能够实现一些工具帮助我们更好地了解我们的应用。

State：定义了应用的状态数据
Getters：在 store 中定义“getter”（可以认为是 store 的计算属性），就像计算属性一样，getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算
Mutations：是更改 store 中状态的唯一方法，且必须是同步函数
Actions：用于提交 mutation，而不是直接变更状态，可以包含任意异步操作
Modules：允许将单一的 Store 拆分为多个 store 且同时保存在单一的状态树中

三、基本使用

安装依赖npm intall vuex --save
在项目目录src中建立store文件夹

在store文件夹下新建index.js文件，写入

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
//创建Vuex实例对象
const store = new Vuex.Store({
    state:{
    },
    getters:{
    },
    mutations:{
    },
    actions:{
    }
})
export default store;

在main.js文件中引入vuex

import Vue from 'vue';
import App from './App.vue';
import store from './store';
const vm = new Vue({
    store:store,
    render: h => h(App)
}).$mount('#app')

在其他组件中使用store对象中保存的状态即可
- 通过this.$store.state.属性来访问状态
- 通过this.$store.commit('mutation中的方法')来修改状态

vuex基础知识

一、vuex是什么

二、核心概念

三、基本使用