定义

• 响应式状态管理模式，集中式存储，多个组件间共享状态的插件

• 带着目的来学习

  管理什么状态？

  多个状态、多个组件间需要共享的信息，兄弟组件之间的信息传递。

• 用户登录状态，名称，头像，地理位置信息

• 商品的收藏，购物车中的物品

单页面状态管理

View->State->Actions

变量保存状态state，指向界面view，产生某些行为action，

修改状态产生新的状态

整体安装

npm install vuex

使用

安装

新建文件夹store
store里面新建文件index.js

import Vue from 'vue'
import Vuex from 'vuex'
// 安装
Vue.use(Vuex)
// 创建对象
const store = new Vuex.Store({
    state: {
  },
  mutations: {
  // 方法
  },
})
// 导出
export default store

如何用？

• 将共享的状态抽离出来，交给大管家，统一进行管理
• 按照预先设置的规则，进行访问和修改等操作
• 不要直接通过Components改变State，通过Mutations改变，可以被Devtools记录下来

  

核心概念

• State：单一状态树，
• Getters：计算属性，
• Mutation：vuex更新的唯一方式，定义方法，
• Action
• Module

  State

  Single Source of Truth
  只使用一个store

mutation

定义方法，使用commit

each mutation has a string type and a handler

另一种提交风格

this.$store.commit({
  type: 'incrementCount',
  count
})

mutation的响应式

需要提前在state中初始化
或者使用set，就可以响应式
Vue.set(state.info, “review”, 5)
删除属性用delete，该方式做不到响应式
需要响应式的话，可以：
Vue.delete(state.info, “price”)

mutation的类型常量

不要在mutation里面进行异步操作！！！

用action

getters

类似计算属性，当某个数据需要变化之后展示时，使用；
还可以传另一个getters
还可以返回另一个函数