搞定vuex常见功能

本文只介绍vueX里边经常使用的功能

接下来介绍下每个概念的具体使用

State

state的介绍下具体的获取方式

1、传统方式

computed(){
    userName(){
        return this.$store.userName
    }
}

2、通过mapState

    computed(){
        ...mapState({
              userName:(state)=>state.name
        })
        ...mapState(['userName','age'])
    }

3、那如果将定义的store对象放入module或者声明了nameSpace:true,那如果获取Sate?

//传统方式
computed(){
    userName(){
        return this.$store.moduleName.userName
    }
}

//mapState

   computed(){
        ...mapState({
              userName:(state)=>state.moduleName.name
        })
       ...mapState('moduleName',['name','age'])
    }

示例代码，后边所有的内容，都以这个为大致获取

export default {
  namespaced:true,
 state:{
   name:'xiaoqing',
   age:18,
   todos:[
    { id: 1, text: '...', done: true },
    { id: 2, text: '...', done: false }
   ]
 },
 getters:{
  hasDone(state){
    return state.todos.filter(item=>item.done)
  },
  currentAge(state){
    return state.age
  },
  getTodoById: (state) => (id) => {
    return state.todos.find(todo => todo.id === id)
  }
 },
 mutations:{
  changeAge(state,playLoad){
    console.log('playLoad',playLoad)
    state.age = state.age+playLoad.count
  }
 },
 actions:{
   getUserAge({commit,state,getters}){
     console.log('sss')
     return new Promise(resolve=>{
       commit('changeAge',{count:15})
        resolve()
     })
   }
 }
}

getters

有时候我们需要从 store 中的 state 中派生出一些状态,不想每次在获取的时候都计算一边，那我们就可以使用getters进行处理，比如对列表的进行顾虑等。

敲重点：module 只影响state的获取方式，getters，mutations，actions仍然在全局中获取。但是如果加了命空间。namespace:true。它的所有 getter、action 及 mutation 都会自动根据模块注册的路径调整命名

声明

接受两个参数，state,getters

getters: {

    doneTodos: state => {
      return state.todos.filter(todo => todo.done)
    },

  doneTodosCount: (state, getters) => {
    return getters.doneTodos.length
  }
}

获取

1、传统方式

computed(){
//带了命名空间
  hasDone(){
     return this.$store.getters['user/hasDone']
   },
   
//不带命名空间
    userName(){
       return this.$store.getters.name
   },
}

2、mapGetters

computed(){
    ...mapGetters({hasDone:'user/hasDone',currentAge:'user/currentAge'}),

}

//或者

  ...mapGetters('user',['hasDone','currentAge']),

mutations

mutations只处理同步请求

声明

接受state和 playload两个参数

 mutations:{
  changeAge(state,playLoad){
    console.log('playLoad',playLoad)
    state.age = state.age+playLoad.count
  }
 }

获取

1、可以通过荷载或者对象的形式获取

//荷载

this.$store.commit('user/changeAge', {
  count: 10
})


//对象

this.$store.commit({
  type: 'user/changeAge',
  count: 10
})

2、使用mapMutations使触发方式更加简便,更像是一个方法的调用

 methods:{
    changes(){
      this.changeAge({count:10})
    },
    ...mapMutations('user',['changeAge']),

  }

actions

处理异步请求

Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象，因此你可以调用 context.commit 提交一个 mutation，或者通过 context.state 和 context.getters 来获取 state 和 getters

声明

 actions:{
   getUserAge({commit,state,getters},playLoad){
     console.log('sss')
     return new Promise(resolve=>{
       commit('changeAge',{count:15})
        resolve()
     })
   }
 }

获取

1、可以通过荷载或者对象的形式获取

// 以载荷形式分发
this.$store.dispatch('user/getUserAge', {
  count: 10
})

// 以对象形式分发
store.dispatch({
  type: 'user/getUserAge',
  count: 10
})

2、通过mapActions获取

  methods:{
    getAge(){
      this.getUserAge({count:10})
    },
    ...mapActions('user',['getUserAge'])

  },

表单中使用store的处理费方式

利用computed是set，get

<input v-model="name">

computed(){
    name:{
          get(){
            return this.$store.state.user.name
          },
          set(value){
            this.$store.commit('user/changeUserName',value)
          }
        }
}