vuex详解

（1）state

state:{        //存放的键值对就是所要管理的状态                    
    name:'helloVueX'    
 }
 //在组件中调用 $store.state.name

（2）mutations

mutations:{
    edit(state,payload){
        state.name = 'jack'            
        console.log(payload) // 15或{age:15,sex:'男'}        
    }
}
 //在组件中调用 $store.commit('edit',{age:15,sex:'男'})

Vue组件如果调用某个VueX的方法过程中需要向后端请求时或者说出现异步操作时，需要dispatch VueX中actions的方法，以保证数据的同步。可以说，action的存在就是为了让mutations中的方法能在异步操作中起作用。
如果没有异步操作，那么我们就可以直接在组件内提交状态中的Mutations中自己编写的方法来达成对state成员的操作。

（3）增删state中的成员

Vue.set 为某个对象设置成员的值，若不存在则新增

Vue.set(state,"age",15)

Vue.delete 删除成员

Vue.delete(state,'age')

（4）Actions

由于直接在mutation方法中进行异步操作，将会引起数据失效。所以提供了Actions来专门进行异步操作，最终提交mutation方法。

Actions中的方法有两个默认参数

• context上下文(相当于箭头函数中的this)对象
• payload 挂载参数

actions:{
    aEdit(context,payload){
        return new promise((resolve,reject)=>{     
            setTimeout(()=>{
                context.commit('edit',payload)
                resolve()            
            },2000)        
        })
    }
}
//在组件中调用 this.$store.dispatch('aEdit',{age:15})

（5）Getters

可以对state中的成员加工后传递给外界
Getters中的方法有两个默认参数

• state 当前VueX对象中的状态对象
• getters 当前getters对象，用于将getters下的其他getter拿来用

例如

getters:{
        nameInfo(state){
        return "姓名:"+state.name
    },
    fullInfo(state,getters){
        return getters.nameInfo+'年龄:'+state.age
    }  
}
//在组件中调用 this.$store.getters.fullInfo

（6）Models

当项目庞大，状态非常多时，可以采用模块化管理模式。Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割。

//store/index.js
import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex);
import test from "./modules/test.js" // 引入ai 模块
export default new Vuex.Store({
  modules: {
    test
  }
})
//store/modules/test.js
export default {
  namespaced: true, //开启命名空间,被模块化的store须要开启命名空间
  state:{   //存放所要管理的状态            
    name:'helloVueX'    
  },
  mutations:{ //同步改变state
    changeName(state,name){
        state.name = name       
    }
  },
  actions:{    //异步改变state
    changeName(context,name){
      return new promise((resolve,reject)=>{     
        setTimeout(()=>{
          context.commit('changeName',name)
          resolve()            
        },2000)        
      })
    }
  },
  getters:{ //对state中的成员加工后传递给外界
    nameInfo(state){
      return "姓名:"+state.name
    }
  }
}

详情见:https://www.jianshu.com/p/2e5973fe1223

（7）vuex封装

目录结构

index.js

//index.js
import Vue from 'vue'
import Vuex from 'vuex'
import getters from './getters'
Vue.use(Vuex)
// https://webpack.js.org/guides/dependency-management/#requirecontext
const modulesFiles = require.context('./modules', true, /\.js$/)
// you do not need `import app from './modules/app'`
// it will auto require all vuex module from modules file
const modules = modulesFiles.keys().reduce((modules, modulePath) => {
  // set './app.js' => 'app'
  const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, '$1')
  const value = modulesFiles(modulePath)
  modules[moduleName] = value.default
  return modules
}, {})
const store = new Vuex.Store({
  modules,
  getters
})
export default store

modules

// ./modules/xxx.js
const state = {
  jj_name:'', 
  jj_data:{}, 
}
const mutations = {
  send_jj_name: (state, data) => {
    state.jj_name = data
  },
  send_jj_data: (state, data) => {
    state.jj_data = data
  }
}
const actions = {
  async set_jj_name(context, data){
    await context.commit('send_jj_name',data) 
  },
  async set_jj_data(context, data){
    await context.commit('send_jj_data',data) 
  },
}
export default {
  namespaced: true,
  state,
  mutations,
  actions
}

getters.js

// getters.js
const getters = {
  jj_name: state => state.xxx.jj_name,
  jj_data: state => state.xxx.jj_data,
}
export default getters

（8）mapState、mapActions、mapGetters、mapMutations

import { mapState, mapGetters, mapActions, mapMutations } from 'vuex'
computed: {
  ...mapState([
    'aaa',
    'bbb',
    'ccc',
    'ddd'
  ]),
  ...mapGetters([
    'count'
  ])
},
methods: {
  ...mapActions([
    'getAaa'
  ]),
  ...mapMutations([
    'addAge'
  ])
}