VueX-状态管理（十二）

1、vuex的作用：
vuex是一个专为 Vue.js 应用程序开发的状态管理模式，使用也是创建一个全局对象
2、vuex和其它的全局对象的不同：
1）Vuex的状态存储是响应式，状态的改变需要在路由组件的方法中commit→this.$store.commit('addstudent', stu )
2）commit的是mutations，所有的状态都存放在state中
3、组件文件获取state对象状态：
$store.state.xxx
4、Mutation：
1）mutation里只能存在同步操作的代码
2）每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)，并且state作为该回调函数的第一个默认参数，额外的参数成为：载荷（payload）
3）可以将mutation的事件类型定义成常量存放在另一个js文件中

  mutations: {
    // 方法,默认会有一个参数state，就是上面的state
    // 写在这里的方法，需要在要调用此方法的路由里this.$store.commit
    increment(state) {
      state.counter++;
    },
    // 将mutations事件类型定义成常量，那我们方法就可以这么定义，官方文档建议这么写
    [DECREMENT](state) {
      state.counter--;
    }

5、Getter：
1）在state派生出来的一些状态，在其它组件中不需要commit，直接调用：$store.getters.xxx
2）Getter默认参数state，如需要传入其它参数，那么只能让getter本身返回另一个函数

index.js
getters: {
    // 1.这里的函数也是默认要写一个参数state，其它组件调用的时候不用commit
    more20stu(state) {
      // 箭头函数，当代码行只有一行得时候，可以写到一行，不写return
      // 获取年龄大于20岁的students
      return state.students.filter(s => s.age > 20)
    }

App.vue
<h2>年龄大于20的人：{{$store.getters.more20stu}}</h2>

6、Actions
1）Actions提交的是mutation，而不是直接更改状态。index.js：

actions: {
    // 当需要异步处理的死后，就用actions，默认参数context：上下文
    updateinfo(context,job) {
      setTimeout(()=>{
        context.commit('updatastus',job)
      },1500)
    }
  }

2）Actions处理的是异步函数
3）默认参数context：上下文的意思
4）在组件中使用，通过 store.dispatch 方法触发。App.vue：

updatastu(jober){
     // this.$store.commit('updatastus',jober)
     this.$store.dispatch('updateinfo',jober)
}

5）结合异步处理promise使用：

updateinfo(context,job) {
   return new Promise(resolve => {
     setTimeout(()=>{
       // 这里的updatastus是mutation里的
       context.commit('updatastus',job)
       resolve('updateinfo异步处理完毕')
     },1500)
   }).then(res =>{
     console.log(res)
   })
}

7、Modules
1）由于官方建议只new 一个Vuex，这样会造成state拥挤，所以有了modules
2）modules里可以定义自己的state，mutations，actions，getters
3）获取模块里的state状态：<h2>{{$store.state.a.name}}</h2>

index.js
// 2.1 抽离modules里的state
const moduleA = {
  state:{
    name:'李莉'
  },
  mutations:{
    upname(state,name2){
      state.name = name2
    }
  },
  actions:{},
}
export default new Vuex.Store({
    modules: {
    a:moduleA
    }
})

4）mutations和getters的操作一样，不受影响
5）modules里的getters允许传入第三个参数：rootState，为了调用主Vuex里的state

index.js
const moduleA = {
  state:{
    name:'李莉'
  },
  mutations:{
    upname(state,name2){
      state.name = name2
    }
  },
  getters:{
    fullname1(state){
      return state.name + '111'
    },
    fullname2(state,getters){
      return getters.fullname1 + '222'
    },
    fullname3(state,getters,rootState){
      return getters.fullname2 + rootState.counter
    }
  },
  actions:{},
}
export default new Vuex.Store({
    modules: {
    a:moduleA
    }
})

8、整体代码架构

import Vue from 'vue'
import Vuex from 'vuex'
import {DECREMENT} from "./mutations-types";

// 1.安装插件 => vuex是项目开发时使用的状态管理工具
Vue.use(Vuex)

// 2.创建对象并导出
export default new Vuex.Store({
  // state保存状态,可以添加多个状态
  state: {
    counter: 5,
    // 由于是响应式，所以数据改变，所有的数据都会变，但是只局限与已经在store中初始化所需的属性
    // 如果在往students通过方法添加一个对象，那么在浏览器上是不会被渲染出来的！！！！
    // 可以用splice，或者set来修改students里的对象内容
    students:[
      {id:110, name:'lisa',age:10},
      {id:120, name:'lucy',age:24},
      {id:130, name:'jenkins',age:30},
      {id:140, name:'golf',age:18},
    ],
    info:{name:'Lily',age:16,work:'nurse'}
  },
  mutations: {
    // 方法,默认会有一个参数state，就是上面的state
    // 写在这里的方法，需要在要调用此方法的路由里this.$store.commit
    increment(state) {
      state.counter++;
    },
    // 将mutations事件类型定义成常量，那我们方法就可以这么定义，官方文档建议这么写
    [DECREMENT](state) {
      state.counter--;
    },
    // 指定加多少次,同步操作的时候放这里，异步的时候放actions
    incrementCount(state, counte) {
      state.counter += counte;
    },
    // mutations的第二种提交方式
    incrementcount2(state, payload) {
      state.counter += payload.count
    },
    // 增加学生信息，往students数组里添加一个对象信息
    addstudent(state, user){
      state.students.push(user);
    },
    // 响应式增加students的对象
    updatastus(state, job) {
      // Vue.set(),修改数组，就传num，修改对象，就传key
      // Vue.set(state.info,'work',job)
      // 删除对象元素的响应式写法
      // Vue.delete(state.info, age)
      state.info.work=job
    }
  },
  actions: {
    // 当需要异步处理的死后，就用actions，默认参数context：上下文
    updateinfo(context,job) {
      setTimeout(()=>{
        context.commit('updatastus',job)
      },1500)
    }
  },
  modules: {
  },
  // getters默认是不能传递参数的，如果希望传递参数，那么只能让getters本身返回另一个函数
  getters: {
    // 1.这里的函数也是默认要写一个参数state，其它组件调用的时候不用commit
    more20stu(state) {
      // 箭头函数，当代码行只有一行得时候，可以写到一行，不写return
      // 获取年龄大于20岁的students
      return state.students.filter(s => s.age > 20)
    },
    // 2.getters可以链式传递，比如现在需要获得年龄大于20的学生个数
    more20stulength(state, getters) {
      return getters.more20stu.length
    },
    // 3.动态获取，大于参数age的学生
    moreagestu(state) {
      // return function (age) {
      //     return state.students.filter(s => s.age > age)
      // }
      return age => state.students.filter(s => s.age > age)
    },
    // 4.也可以都用箭头函数写，stuById为组件里要调用的方法名
    stuById: state => {
      return id => state.students.filter(s => s.id===id)
    }
  }
})

9、vuex-store文件及的目录结构
目录结构，代码抽离，使其代码更简洁，维护更方便：将modules，actions，getters，mutations抽离

store目录结构