Vuex相关知识

1.定义：

官方解释：Vuex是一个专为vue.js应用程序开发的状态管理模式。
.它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化；
.Vuex也集成到Vue的官方调式工具devtools extension，提供了诸如零配置time-travel调式，状态快照导入导出等高级调式功能。

1.1 状态管理到底是什么？

.状态管理模式、集中式存储管理这些名词听起来就非常高大上，让人琢磨不透；
.其实，你可以简单的将其看成把需要的多个组件共享的变量全部存储在一个对象里面；
.然后，将这个对象放在顶层Vue实例中，让其他组件可以使用；
.那么，多个组件是不是就可以共享这个对象中的所有变量属性了呢？
等等 ，如果是这样的话，为什么官方还要专门出一个插件Vuex呢？难道我们不能自己封装一个对象管理吗？
.当然可以，只是我们要先想想VueJs带给我们最大的便利是什么呢？没错，就是响应式；
.如果你自己封装实现一个对象能不能保证它里面所有的属性做到响应式呢？当然也可以，只是封装稍微麻烦一些；
.不用怀疑 ，Vuex就是为了提供这样一个在多个组件间共享状态的插件，用它就可以了

1.2 管理什么状态呢

但是，有什么状态时需要我们在多个组件间共享呢？
.如果，你做过大型开放项目，你一定遇到过多个状态，在多个界面间共享的问题；
.比如用户的登录状态、用户名称、头像、地理位置信息等等；
.比如商品收藏，购物车中的物品等等；
.这些状态信息，我们都可以放在统一的地方，对它进行保存和管理，而且他们还是响应式的

2.Vuex的使用过程

2.1在src下面创建store的文件夹

2.2在index里面引用vuex插件

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

//1.安装插件
Vue.use(Vuex)

//2.创建对象
const store=new Vuex.Store({

})

//3.导出store对象
export  default store

2.3在main.js里面引用vuex插件

3.Vuex创建对象的详解

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

//1.安装插件
Vue.use(Vuex)

//2.创建对象
const store=new Vuex.Store({
  state:{
    counter:1000
  },
  mutations:{
    //方法
    increment(state){
      state.counter++
    },
    decrement(state){
      state.counter--
    }

  },
  actions:{

  },
  getters:{

  },
  modules:{

  }
})

//3.导出store对象
export  default store

3.1.state用法

用于存储所有的用户的状态，方便在其他页面进行调用，调用时可以通过$store.$store.state.定义的属性名
方法一：简单定义属性

//在state使用属性
 state:{
    counter:1000
  }
 //在其他页面进行调用
  <h2>{{$store.state.counter}}</h2>

方法二：实现属性的增加实现响应式

state:{
    info:{
      name:'Nickel',
      age:18,
      height:182
    }
  },
 mutations:{
    updateInfo(state){
      Vue.set(state.info,'address','GuiZhou')
    }
  },

方法三：实现属性的删除实现响应式

state:{
    info:{
      name:'Nickel',
      age:18,
      height:182
    }
  },
 mutations:{
    updateInfo(state){
      Vue.delete(state.info,'age')
    }
  },

3.2.mutations用法

在里面定义的方法，可以通过devtools工具时时的跟踪状态什么时候发生改变

方法一：传递方法名

//mutations里面定义方法
 mutations:{
    //方法
    increment(state){
      state.counter++
    },
    decrement(state){
      state.counter--
    },
    incrementCount(state,count){
      state.counter+=count
    },
    addStu(state,student){
      state.students.push(student)
    }

  },
//在其他页面调用方法
 <button @click="addtion">+</button>
 <button @click="subtraction">-</button>
 <button @click="addCount(5)">+5</button>
 <button @click="addCount(10)">+10</button>
 <button @click="addStu">添加学生</button>

 methods:{
      addtion(){
        this.$store.commit('increment')
      },
      subtraction(){
         this.$store.commit('decrement')
      }
    },
      addCount(count){
        this.$store.commit("incrementCount",count)
      },
      addStu(){
        const  student= {id:114,name:'Nickel',age:24}
        this.$store.commit("addStu",student)
      }

方法二：传递对象

//提交参数是一个对象的形式
  addStu(){
        const  student= {id:114,name:'Nickel',age:24}
        this.$store.commit({
          type:'addStu',
          student
        })
      }
 //当获取的时候必须是对象的形式
addStu(state,payload){
    state.students.push(payload.student)
} 

方法三：实现方法的配置及导入
1.在store里面mutations-type.js的配置文件

2.里面定义相关的属性

export const  INCREMENT='increment'

3.导入相关的属性进行使用（app-vue）

 import {INCREMENT} from "./store/mutations-types";

methods:{
   addtion(){
      this.$store.commit(INCREMENT)
    }
    },

4.导入相关的属性进行使用（vuex）

 import {INCREMENT} from "./store/mutations-types";

 mutations:{
    //方法
    [INCREMENT](state){
      state.counter++
    }
    }

3.3.getters属性的用法

getters属性的用法相当于计算属性，对某一个数值进行复制的逻辑操作之后在前端页面进行显示

//在getters里面计算某一个数的平方
  getters:{
    powerCounter(state){
     return  state.counter *state.counter
    },
  }
//在其他页面进行使用
  <h2>{{$store.getters.powerCounter}}</h2>

getter定义

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

//1.安装插件
Vue.use(Vuex)

//2.创建对象
const store=new Vuex.Store({
  state:{
    counter:1000,
    students:[
      {id:110,name:'why',age:18},
      {id:111,name:'Kobe',age:24},
      {id:112,name:'james',age:30},
      {id:113,name:'curry',age:10},
    ]
  },
  mutations:{
    //方法
    increment(state){
      state.counter++
    },
    decrement(state){
      state.counter--
    }

  },
  actions:{

  },
  getters:{
    powerCounter(state){
     return  state.counter *state.counter
    },
    more20Stu2(state){
      return state.students.filter(s=>s.age>20)
    },
    more20Stu2Lenth(state,getters){
      return getters.more20Stu2.length
    },
    moreAgeStu(state){
     return function (age) {
         return state.students.filter(s=>s.age>age)
     }
    }
  },
  modules:{

  }
})

//3.导出store对象
export  default store

getter使用

    <h2>{{$store.getters.more20Stu2}}</h2>
    <h2>学生的个数为：{{$store.getters.more20Stu2Lenth}}</h2>
    <h2>{{$store.getters.moreAgeStu(12)}}</h2>

3.4.actions属性的用法

3.4.1 使用方法一：简单的使用

1.在mutations里面定义需要修改的方法

mutations:{
    updateInfo(state){
      state.info.name='CoderWhy';
    }
  }

2.在action里面调用mutions方法，此时可以是异步

actions:{
      //实现异步修改学生信息
      aUpdateInfo(context){
        setTimeout(()=>{
          context.commit('updateInfo')
        },1000)
      }
  }

3.在app.vue里面进行调用

 <h2>{{$store.state.info}}</h2>
 <button @click="updateInfo">点击修改信息</button>


 methods:{
 updateInfo(){
       // this.$store.commit('updateInfo')
        this.$store.dispatch('aUpdateInfo')
      }
      }

3.4.2 使用方法二：回调1

1.在mutations里面定义需要修改的方法

mutations:{
    updateInfo(state){
      state.info.name='CoderWhy';
    }
  }

2.在action里面调用mutions方法，此时可以是异步

  actions:{
      //实现异步修改学生信息
      aUpdateInfo(context,payLoad){
        setTimeout(()=>{
          context.commit('updateInfo');
          console.log(payLoad.message)
          payLoad.success()
        },1000)
      }
  }

3.在app.vue里面进行调用

 <h2>{{$store.state.info}}</h2>
 <button @click="updateInfo">点击修改信息</button>


 methods:{
  updateInfo(){
       // this.$store.commit('updateInfo')
        this.$store.dispatch('aUpdateInfo', {
          message:"我是携带的信息",
          success:()=>{
            console.log('里面已经完成了')
          }
        })
      }
 }

3.4.3 使用方法二：回调2

1.在mutations里面定义需要修改的方法

mutations:{
    updateInfo(state){
      state.info.name='CoderWhy';
    }
  }

2.在action里面调用mutions方法，此时可以是异步

actions:{
    aUpdateInfo(context,payLoad){
      return new Promise((resolve,reject)=>{
        setTimeout(()=>{
        context.commit('updateInfo');
        console.log(payLoad);
        resolve('11111');
      },1000)
      })
    }

  },

3.在app.vue里面进行调用

 <h2>{{$store.state.info}}</h2>
 <button @click="updateInfo">点击修改信息</button>


 methods:{
 updateInfo(){
        // this.$store.commit('updateInfo')
        this.$store.dispatch('aUpdateInfo', "我是携带的信息").
        then(rej=>{
          console.log(rej)
          console.log("回调成功");
        })
      }
 }

3.5.module属性的用法

3.5.1 module模块简单用法

1.定义模块对象（index.js）

const moduleA={
  state:{
    name:'zhangSan'
  },
  mutations:{},
  actions:{},
  getters:{

  }
}

const store=new Vuex.Store({
  modules:{
    a:moduleA
  }
})

2.在app.vue里面进行调用

   <h2>------modeule里面信息的获取--------</h2>

   <h2>{{$store.state.a.name}}</h2>

3.5.2 module模块getter的使用方法

1.在module创建相关的方法

const moduleA={
  state:{
    name:'zhangSan'
  },
  getters:{
    fullName(state){
      return state.name+'1111'
    },
    fullName2(state,getters){
      return getters.fullName+'22222'
    },
    fullName3(state,getters,rootState){
      return getters.fullName2+rootState.counter
    }
  }
}

const store=new Vuex.Store({
  state:{
    counter:1000,
  },
  modules:{
    a:moduleA
  }
})

2.在app.vue里面进行调用

<h2>------modeule里面信息的获取--------</h2>
    <h2>{{$store.state.a.name}}</h2>
    <h2>{{$store.getters.fullName}}</h2>
    <h2>{{$store.getters.fullName2}}</h2>
    <h2>{{$store.getters.fullName3}}</h2>

3.5.3 module模块active的使用方法

1.创建active方法

const moduleA={
  state:{
    name:'zhangSan'
  },
  mutations:{
    aUpdateName(state,pageLoad) {
      state.name=pageLoad
    }
  },
  actions:{
    aUpdateName(context){
      context.commit("aUpdateName",'wangwu')
    }
  },
}

const store=new Vuex.Store({
  state:{
    counter:1000,
  },
  modules:{
    a:moduleA
  }

2.在app.vue里面进行调用相关的方法

 <h2>------modeule里面信息的获取--------</h2>
    <h2>{{$store.state.a.name}}</h2>
    <h2>{{$store.getters.fullName}}</h2>
    <h2>{{$store.getters.fullName2}}</h2>
    <h2>{{$store.getters.fullName3}}</h2>
    <button @click="moUpdateName">修改姓名</button>

method:{
 moUpdateName(){
        this.$store.dispatch("aUpdateName")
      }
}