对于 Vuex 核心概念和用法的一个总结

这篇文章是，对于 Vuex 核心概念 和 基础用法 的一个总结：

---

• Vuex 是什么 ?

Vuex : 是实现组件全局状态（数据）管理的一种机制，可以方便的实现组件之间数据的共享。

• 使用 Vuex 统一管理状态的好处 ?

1.  能够在 vuex 中集中管理共享的数据，利于开发和后期的维护；

2. 能够高效的实现组件之间的数据共享，提高开发效率；

3. 存储在 vuex 中的数据都是响应式的，能够实时保持数据与页面的同步；

• 什么样的数据适合存储在 vuex 中 ?

一般情况下，只有组件之间共享的数据，才有必要存储在 vuex 中，对于组件中的私有数据，依旧存储在组件自身的 data中即可。

• 在 Vue 中使用 Vuex 的基本使用 ?

• 安装 Vuex 依赖项 :

npm install vuex --save

• 导入 Vuex 包 :

import Vuex from 'vuex'
Vue.use(Vuex)

• 创建 Store 对象 :

const store = new Vuex.store({
//state中存放的就是全局共享的数据
    state:{count:0},
    mutations:{},
    actions:{},
    getters:{}
})

• 将 Store 对象挂载到 Vue 实例中 :

new Vue({
	el:"#app",
	render:h => h(app),
	router,
	//将创建的共享数据对象，挂载到vue实例中
	//所有组件，就可以从store中获取全局的数据了
	store
})

• State : 共享的数据

State : 提供唯一的公共数据源，所有共享的数据都要统一放到 Store 的 State 中存储；

//创建store数据源，提供唯一的公共数据
const store = new Vuex.Store({
    state:{count:0};
)

组件中访问 State 中数据的第一种方式 :

this.$store.state.全局数据名称;

组件中访问 State 中数据的第二种方式 :

//1.从 vuex 中按需导入 mapState 函数
import {mapState} from 'vuex'
//2.将全局数据，映射为当前组件的计算属性
computed:{
    ...mapState(['count']);
}

• Mutation : 更改 Store 中的数据

Mutation: (同步)用于更改 Store 中的数据。只能通过 mutation 变更 Store 数据，不可以直接操作 Store 中的数据，通过这种方式虽然操作起来比较繁琐一些，但是可以集中监控所有数据的变化。

//定义Mutation
const store = new Vuex.Store({
state:{
    count = 0;
},
mutations:{
add(state){
//变更状态
    state.count++;
  }
 }
})

组件中触发 mutations 的第一种方式 ：

//触发mutation
methods:{
handle(){
//触发mutation的第一种方式
    this.$store.commit('add');
  }
}

 组件中在触发 mutations 时传递参数 :

//定义mutation
const store = new Vuex.Store({
state:{count:0},
mutations:{
addN(state,step){
//变更状态
    state.count += step;
    }
  } 
})
========================================
//组件中触发mutations都一种方式
methods:{
handle2(){
//在调用commit函数触发mutation时携带参数
    this.$store.commit('add',3);
  }
}

组件中触发 mutations 都二种方式 :

//1.从vuex中导入mutations函数
import {mapMutations} from 'vuex'
//2.将指定的mutations函数，映射为当前组件的methods函数
methods:{
    ...mapMutations(['add','addN']);
}

• Action : 异步操作

Action: 用于处理异步操作；如果通过异步操作变更数据，必须通过 Action，而不能使用 Mutation ,但是在 Action 中还是要通过触发 Mutation 的方式变更数据。

//定义Action
const store = new Vuex.Store({
    state:{count:0},
//同步操作
mutations:{
add(state){
    state.count++;
}
},
//异步操作
actions:{
addAsync(context){
    setTimeout(()=>{
    context.commit('add');
    },1000)
  }
 }
})
====================================
//触发actions的第一种方法
this.$store.dispatch('addAsync');

 组件中触发 actions 的二种方式 :

//触发actions的第一种方法
this.$store.dispatch('addAsync');

//=============================

//触发actions的第二种方法
//1.从vuex中按需导入mapActions函数
import {mapActions} from 'vuex'

//2.将指定的actions函数，映射成当前组件的methods函数
    ...mapActions(['addASync'],'addNASync');

组件中触发 actions 异步任务时携带参数 :

//定义Action
const store = new Vuex.Store({
tate:{count:0},
//同步操作
mutations:{
addN(state,step){
    state.count += step;
 }
},
//异步操作
actions:{
addNAsync(context,step){
    setTimeout(()=>{
    context.commit('addN',step);
    },1000)
  }
 }
})
//触发Action
methods:{
handle(){
//在调用dispatch函数触发actions时携带参数
    this.$store.dispatch('addNAsync',5);
  }
}

•  Getter : 数据进行加工

Getter: 用于对 Store 中的数据进行加工处理形成新的数据；只是进行包装，不会改变值，类似于 Vue 的计算属性；当store 中数据改变，getter 中数据也会改变。

//定义Getter
const store = new Vuex.Store({
state:{
    count:0;
},
getters:{
showNum:state => {
    return '当前最新的数量是【'+state.count+'】';
    }
  }
})

 组件中使用 getters 的第一种方式 ：

this.$store.getters.名称;

组件中使用 getters 的第二种方式 :

import {mapGetters} from 'vuex'
computed:{
    ...mapGetters(['showNum']);
}

• Modules : 模块化，文件引入 

// 在 store 下的 index 文件中
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

const modulesFiles = require.context('./modules', true, /\.js$/)
const modules = modulesFiles.keys().reduce((modules, modulePath) => {
  const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, '$1')
  const value = modulesFiles(modulePath)
  modules[moduleName] = value.default
  return modules
}, {})

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

export default store

【注意】：首先在 store 目录下新建 modules 目录，里面可添加各个模块具体的子文件。在模块化子文件中，使用命名空间 。

const state = {}
const mutations = { }
const actions = {}

export default {
    namespaced: true,
    state,
    mutations,
    actions
}

【注意】：在组件中访问 。

// 外层目录为 store 下面的 resourceMonitoring
computed:{
      ...mapState('resourceMonitoring/serviceMonitoring',['prmData'])
 },
 methods: {
       ...mapMutations('resourceMonitoring/serviceMonitoring',['SET_PAGENO']),
       ...mapActions('resourceMonitoring/serviceMonitoring',['REQ_TABLEDATA'])
 } 

// 外层目录为 store 
computed:{
      ...mapState('serviceMonitoring',['prmData'])
 },
 methods: {
       ...mapMutations('serviceMonitoring',['SET_PAGENO']),
       ...mapActions('serviceMonitoring',['REQ_TABLEDATA'])
 }

注意： vuex 的 getter，state 中的数据，只能在 beforeUpdate 阶段进行访问处理，在其他钩子函数中访问不到有效值。