vuex 笔记

vuex 是一个为 vue 应用开发的集中式状态管理插件，属于生产时依赖

1. 概念：可以简单的理解为把需要多个组件间共享的变量全部存储在一个对象里面。然后把这个对象放在顶层的vue实例中， 让其他组件可以访问使用。
2. 类似于在vue实例原型上添加一个公共变量:
3. Vue.prototype.commonObj={};

vuex 特性：

1. 响应式
2. 虽然可以自己封装一个对象来管理公共变量，但很难做到响应式，所以会用到 vuex。
3. *vuex 就是一个在多个组件间共享状态的插件，并且可以响应式改变和跟踪这些状态。

需要使用vuex的地方：

1. 用户的登录状态，用户信息（ID,名称，头像，），地理位置信息等等
2. 购物车，收藏夹，对比信息

vuex 核心概念

1. State,Getters,Mutations,Actions,Modules

vuex 状态管理流程

1. Vuex 状态相关：Actions,Mutaions,State
2. Actions(commit)-->Mutations(mutate-突变)-->State(render)-->Vue components(dispatch-发送)--> Actions(异步时使用)/Mutations
3. Backend API 通过 Actions 与 Vuex 进行交互
4. DevTools 通过 Mutations 与 Vuex 进行交互
5. Vue components 通过 Actions（异步时使用）、Mutations 修改 State 与 Vuex 进行交互
6. *Vue components 也可以直接修改State，但这样的操作 DevTools 跟踪不到，所以官方不建议这样做。
7. 单界面的状态管理：State(存储变量)->View(信息展示)->Action(用户操作)->State(改变后变量)
8. 单一状态树概念（单一数据源）：即整个 vue 实例有且仅有一个 $store

安装 vuex

1. npm install vuex --save

使用 vuex (主要是使用 vuex 中的 store 对象)

1. 新建store/index.js: //把需要在组件间共享的变量定义在 soter 中

   import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({ state: {counter: 0} });

2. main.js:

   import store from './store' //引入并在 vue 实例中配置 store 对象。
new Vue({
el: '#app',
store,
router,
render: h => h(App)
})

vuex 使用详解(new Vuex.Store({}))：

1. state 声明的变量都是响应式的state 定义: {counter: 0}state 使用：{{$store.state.counter}}
2. mutations 定义改变 state 的事件:
   { fn(state){ state.counter++ } }mutations 使用，组件 commit 到 mutaitons：methods:{ fn(){ this.$store.commit("increment") } }

3. 通过 commit 向 mutation 传递参数，以更新数据，这个参数叫做“负载-payload”，参数也可以是一个对象

   mutations 定义改变 state 的事件，用参数更新:
   { updateCount(state,num){ state.counter+=num } }mutations 使用，组件 commit 到 mutaitons，传递参数：methods:{ addCount(num){ this.$store.commit("updateCount",num) } }

4. 通过 commit 向 mutation 提交是一种普通的方式，vue提供了另一种提交 mutaion的风格，一个包含 type 属性的对象

   mutations 定义:
   { updatePayload(state,payload){ state.counter += payload.num } }mutations 使用：methods:{ updatePayload(num){ this.$store.commit({type:"updatePayload",num}) } }
5. getters 定义(作用类似 computed)， 返回值为非函数:{bigThan20(state){return state.students.filter(s => s.age > 20)}}getters 使用：{{$store.getters.bigThan20}}
6. getters 定义， 返回值为非函数，双参数:{bigThan20Length(state,getters){ return getters.bigThan20.length }}getters 使用：{{$store.getters.bigThan20Length}}
7. getters 定义， 返回值为函数，可以接受参数:{ bigThanAge(state){return age => {return state.students.filter(s => s.age > age) }} }getters 使用，模板用函数，并传参：{{$store.getters.bigThanAge(25) }}

通过mutation （响应式）修改 state 数据的一些方式

• // 这些对数据的修改都是响应式的
• // 但是 vue 之前的版本（除了vue.set|vue.delete 以及修改原有数据项时）都是非响应式的
• state.info.name = 'harry';
• // state.info.height = 20;
• // state.info['addr'] = 'ffff';
• // delete state.info.sex;
• Vue.set(state.info,'addr','英国');
• Vue.delete(state.info,'age');

Actions 使用详解

1. Mutations 里面的方法不能是异步的，因为devtools 无法很好的跟踪 mutations 中的异步操作

2. Actions 类似于 Mutations,但是用来代替Mutations 进行异步操作的，能被 devtools 跟踪到

3. 更新方法提交到mutations,实际的更新数据操作依然在 mutations 中，只是加了一个异步的壳

使用:

1. vuex actions: aUpdateInfo(context) { setTimeout(() => { context.commit('updateInfo'); }, 1000); }
2. vue methods: aUpdateInfo(){ this.$store.dispatch("aUpdateInfo"); }
3. mutations updateInfo: updateInfo(state) { state.info.name='通过 actions 异步方式修改数据' }

modules

1. vue 使用单一状态树，很多状态都会交给单一个store对象管理
2. 当应用复杂时，store对象就会变得臃肿，而module 允许将store分割成不同的模块
3. 每个模块有自己的state,mutations,actons,getters
4. 被分割后，顶级的模块为根(root)模块

modules 使用详解

1. const mouleA={state:{name:'aaa'},...}
2. root Store: modules:{a:moudleA}
3. App vue: $store.state.a.name
4. mutations,actions,getters用法同root module：函数命名不要与 root module里的相同就行， 使用时根模块找不到，就会往分模块找
5. 分模块的 getters 可以传第3个参数 rootState: fullName(state,getters,rootState){return getters.fullName2+rootState.counter}
6. 分模块的 actions context 除了，模块自身定义的，还包含 root 的一些东西可供访问: rootGetters,rootState: fullName(state,getters,rootState){return getters.fullName2+rootState.counter}