vuex的学习

vuex是什么？

vuex是专为vue.js应用程序开发的状态管理模式
它采用集中式存储管理应用所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化
vuex也集成到vue的官方调式工具devtools extension

状态管理到底是什么？

说简单点就是把需要多个组件共享的变量全部存储到一个对象里面，然后将这个对象放到顶层的实例中，让其他组件可以使用
为什么我们不自己封装一个对象来管理呢？

因为封装在vuex里面的数据能够直接做到响应式

什么时候用vuex

当多个视图都依赖同一个状态的时候

vuex基本使用

 在src目录下创建文件夹store，并且创建一个index.js文件，
 import Vue from 'vue'
 import Vuex from 'vuex'
 // 1.安装插件
 Vue.use(Vuex)
 //创建实例
 const store = new Vuex.Store({
   state:{
     count:0
   },
   mutations:{
     increment(state){
       state.count++
     }
   }
 })

   然后让所有Vue组件都能使用这个store对象
   来到main.js文件，导入store对象，并放到new Vue中
   这样，其他组件就可以通过this.$store的方式，获取到这个store对象了
   import Vue from 'vue'
   import App from 'App'
   import store from './store'
   new Vue({
     el:'#app',
     store,
     render:h=>h(App)
   })

 使用vuex中的count
 通过this.$store.state.属性的方式来访问状态
 通过this.$store.commit('mutatiom中方法')来修改状态

注意事项：

我们通过提交mutation的方式，而非直接改变store.state.count
这是因为vuex可以更明确的追踪状态的变化，所以不要直接改变store.state.count的值

vuex中的几个核心的概念

state
getters
mutations
actions
module

state

存放共享源数据
数据的修改不在此进行

getter

  有时候我们需要从store中获取一些state变异后的状态
  如：有一组对象数据，我么要获取年龄大于20岁的个数
  getters:{
    greaterAgestu:state=>{
      return state.students.filter(s => s.age>=20)
    }
  }
  getter默认不能传递参数，如果要传参，只能让getters本身返回另一个参数
  如：根据ID获取用户信息
  getters:{
    stuByid:state=>{
      return id=>{
        return state.students.find(s=> s.id===id)
      }
    }
  }

mutation

vuex中store状态更新唯一方式：提交Mutation
mutation的主要两部分：1.字符串的事件类型（type） 2.回调函数（handler），该回调函数的第一个参数就是state

 mutations的定义
 mutations:{
   increment(state){
     state.count++
   }
 }
 组件中通过mutation更新
 increment：function(){
   this.$store.commit('increment')
 }

  mutation传递单个参数             
  decrement：funtion(){
    this.$store.commit('decrement',2)
  }

  decrement(state,n){
    state.count -= n
  }

  mutation传递多个参数
  使用对象this.$store.commit('decrement',{count:0})
  在用payload对象取出相关信息
  decrement(state,payload){
    state.count =payload.count
  }

 mutation的另一种提交风格（type对象属性）
 this.$store.commit({
   type:'changeCount'，
   count：100
 })

 Mutation中的处理方式是将整个commit的对象作为payload使用, 所以代码没有改变
 changeCount(state,payload){
     state.count =payload.count
   }

 mutation的常量类型：
 1.在mutation中, 我们定义了很多事件类型(也就是其中的方法名称)
 2.方法过多, 使用者需要花费大量的经历去记住这些方法, 甚至是多个文件间来回切换, 查看方法名称, 甚至如果不是复制的时候, 可能还会出现写错的情况.

 如何解决：
 1.我们可以创建一个文件: mutation-types.js, 并且在其中定义我们的常量
 2.定义常量时, 我们可以使用ES2015中的风格, 使用一个常量来作为函数的名称.

 具体实现：
 mutation-types.js文件中
 export const UPDATE_INFO = 'UPDATE_INFO'

 在vuex的index.js文件中
 引入：import * as types from './mutation-types'

 使用：[UPDATE_INFO](state,payload){

 }

 在组件中 
 引入：import {UPDATE_INFO} from './store/mutation-types'
 使用：直接使用UPDATE_INFO

当有异步操作的时候，不要使用mutation,使用actions，因为当使用mutation时，官方插件devtools监控不到异步操作

actions

- 但是某些情况, 我们确实希望在Vuex中进行一些异步操作, 比如网络请求, 必然是异步的. 这个时候怎么处理呢?
- Action类似于Mutation, 但是是用来代替Mutation进行异步操作的.

 mutation和action对比
 mutation:{
   increment(state){
     state.count++
   },
 action:{
   increment(context){
     context.commit('increment')
   }
 }
 }

 context是什么?
 context是和store对象具有相同方法和属性的对象.也就是说, 我们可以通过context去进行commit相关的操作, 也可以获取context.state等.

 在Vue组件中, 如果我们调用action中的方法,那么就需要使用dispatch (同样也支持传递payload对象属性)
 methods：{
   increment(){
     this.$store.dispatch('increment',{count:5})
   }
 }

 mutations:{
   increment(state,payload){
     state.count += payload.count
   }
 }
 actions:{
   increment(context,payload){
     setTimeout(()=>{
       context.commit('increment',payload)
     },5000)
   }
 }

 在Action中, 我们可以将异步操作放在一个Promise中, 并且在成功或者失败后, 调用对应的resolve或reject.
 actions:{
   increment(context){
     return new Promise((resolve)=>{
       setTimeout(()=>{
         context.commit('increment')
         resolve()
       },1000)
     })
   }
 }

 methods:{
   increment(){
     this.$store.dispatch('increment').then(res=>{
       console.log('完成了更新操作')
     })
   }
 }

midule

 Vue使用单一状态树,那么也意味着很多状态都会交给Vuex来管理.
 当应用变得非常复杂时,store对象就有可能变得相当臃肿.
 为了解决这个问题, Vuex允许我们将store分割成模块(Module), 而每个模块拥有自己的state、mutations、actions、getters等

 const moduleA ={
   state:{...},
   mustation:{...},
   ....
 }

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

Module局部状态

我们在moduleA中添加state、mutations、getters
mutation和getters接收的第一个参数是局部状态对象
虽然, 我们的doubleCount和increment都是定义在对象内部的
但是在调用的时候, 依然是通过this.$store来直接调用的.

 actions的写法呢? 接收一个context参数对象
 局部状态通过 context.state 暴露出来，根节点状态则为 context.rootState
 const moduleA ={
   //...
   actions:{
     incrementInfoRootSum({state,commit,rootState}){
       if((state.count + rootstate.count)%2 ==1 ){
         commit('increment')
       }
     }
   }
 }

最后抽取store中的各个对象到各个文件，在进入导入，来完成最后清晰的项目结构

vuex是什么？

状态管理到底是什么？

什么时候用vuex

vuex基本使用

vuex中的几个核心的概念

state

getter

mutation

actions

midule

猜你喜欢