Vuex

vuex 是什么

vuex 是集中式状态管理器

哪些状态需要在 vuex 中管理：

用户的登录状态、用户名称、头像、地理信息
商品的收藏、购物车中的物品

这些状态信息，都可以放在统一的地方，对它进行保存和管理，并且还是响应式的。

单页面管理

![1.2](E:\git\studyProgram\60 Vuejs 教程\21-learnvuex\assets\1.1.png)

这个状态自管理应用包含以下几个部分：

state，用于存储当前页面中的状态，也就是单页面中的 data(){}
view，视图层，可以针对 State 的变化，显示不同的信息；
actions，主要是用户的各种操作。

例如在页面(view)中点击了增加数字，触发了增加数字这个事件(actions)，这个事件修改了数据源(state)，数据源的改变，也就修改了页面中的数字。

![1.5](E:\git\studyProgram\60 Vuejs 教程\21-learnvuex\assets\1.5.png)

![1.4](E:\git\studyProgram\60 Vuejs 教程\21-learnvuex\assets\1.4.gif)

vuex 的基本使用

Vuex 是一个插件，使用时，需要进行安装 npm i vuex -S

使用时与 vue-router 一样，需要先安装插件，创建对象，导出 store 对象。

javascript

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

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    VuexCounter
  },
  mutations: {},
  actions: {},
  getters: {},
  modules: {}
})

export default store

定义好 store 后，还需要进行引入

main.js

javascript

import store from './store'
new Vue({
  el: '#app',
  store
})

随后在新建的组件中进行使用，使用 $store.state.VuexCounter 来获取

![1.6](E:\git\studyProgram\60 Vuejs 教程\21-learnvuex\assets\1.6.png)

![1.7](E:\git\studyProgram\60 Vuejs 教程\21-learnvuex\assets\1.7.gif)

Vuex 的工作流程

但是 vue 官方不推荐这个方法，在多个页面进行修改存储状态时，应该至少使用 mutations 来修改 state 中的数据，这样才能够用官方提供的 Devtools 工具进行监听其中数据发生变化的来源。

![1.2](E:\git\studyProgram\60 Vuejs 教程\21-learnvuex\assets\1.2.png)

Vue Components：组件
Actions：与后端进行 API 请求的方法
Mutations：操作状态的方法
State：保存的状态

而在修改 state 时，应该使用唯一的方法，mutations。

![1.8](E:\git\studyProgram\60 Vuejs 教程\21-learnvuex\assets\1.8.png)

在 mutations 中增加两个方法 increment和decrement，组件中修改 state 的方法则是：this.$store.commit('预先定义的方法名'),这样子就可以在 devtools 中进行监听，便于调试。

使用 **commit**方法调用。

![1.9](E:\git\studyProgram\60 Vuejs 教程\21-learnvuex\assets\1.9.gif)

vuex 的核心概念

state 单一状态树
getters 计算属性
mutations 修改 state 的方法
actions 主要是进行异步操作
module 划分模块

Vuex ​

vuex 是什么 ​

单页面管理 ​

vuex 的基本使用 ​

Vuex 的工作流程 ​