Vuex介绍,参数获取, 异步操作,以及模块化,模块自动导入,命名空间, 辅助函数

Vuex

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式，Vuex是实现组件全局状态（数据）管理的一种机制，可以方便的实现组件之间的数据共享。

推荐开发大型单页应用使用, 如果应用够简单不建议使用, 会使项目变得冗余复杂

Vuex工作流程有个图:

Vuex管理项目优势

• 能够在vuex中集中管理共享的数据，便于开发和后期进行维护
• 能够高效的实现组件之间的数据共享，提高开发效率
• 存储在vuex中的数据是响应式的，当数据发生改变时，页面中的视图也会同步更新

Vuex成员列表

• state — 存放状态(数据)
• mutations — 修改操作state中的数据 , 是同步操作
• getters — 获取state中的数据, 类似与组件中的计算属性
• actions — 异步操作, 在vuex中进行异步操作, 异步操作不能修改state中的数据, 操作完后通过commit交给mutations修改state
• modules — 模块化状态管理, 多状态文件管理时使用

在组件中获取state数据

在组件内的computed内, 通过this.$store.成员(state)调用, 计算属性computed有依赖, 可以实现数据的实时更新;

mutations 修改state数据

只有mutations可以修改state, 同步修改操作在mutations内定义一个方法, 第一个参数是state, 第二个参数是传值

异步修改操作, actions内定义一个方法, 第一个参数是store — 使用commit修改state, 所以可以直接结构拿commit, 第二个参数是payload, 参数

• 同步

在组件内, methods定义方法, 使用, this.$store.commit(’ mutations内定义的方法 ', 参数), 返回值是一个promise,

• 异步

在组件生命周期中初始化时通过dispatch发送指令给actions来完成异步请求。

actions配合mutations, 方法异步操作做完之后, 利用commit修改state, 所以参数直接结构commit, dispatch的使用方法类似commit

getters — 获取器

类似于组件内的computed, 计算属性, 可在此定义一些方法, 在组件内调用, 只需要

this.$store.getters.方法 就好了

getters一般使用模块化去写, 单独导入到store的index.js文件内

// getters代码格式
export default {
// 参数: 返回值	||  短路赋值, 防止参数不存在
  token: state => state.user.token || '',
  leftmenu: state => state.admin.leftMenu || ''
}

moudles — 模块化

大型项目中使用, 把原本写在state中的数据, 拆分到不同的模块中(不同的文件中) , 把原来在Vue.store实例中配置的代码提取到不同的业务文件中

// 自动化引入 模块文件, 修改路径即可
let moduleFn = require.context('./modules', false, /\.js$/)
let modules = moduleFn.keys().reduce((p, c) => {
  let mod = moduleFn(c).default;
  // 统一的补一个namespaced:true
  mod = { ...mod, namespaced: true }
  // 正则中的元组，0全匹配的成功的字符，数小括号，从左到右
  let modName = c.match(/\.\/(\w+)\.js$/)[1]
  p[modName] = mod
  return p
}, {})

开启命名空间

namespaced: true

开启命名空间后, 数据以及方法的调用方案, 需要在 调用数据或方法前加上模块化导入的key

辅助函数

• mapState — 写在计算属性computed内
• mapGetters — 写在计算属性computed内
• mapActions — 写在methods内
• mapMutations — 写在methods内

tip: 在模块化开启命名空间后, 方法和数据的调用有两个参数( 模块化导入的key, 方法名 )

没有开启命名空间的辅助函数写法

// 首先导入, 解构赋值
import  { mapState,  mapGetters,  mapActions,  mapMutations } from  'vuex'
// 在辅助函数前加 ...展开, 因为辅助函数执行之后返回值是一个对象, 所以直接展开
computed(){
	...mapState(['parmas'])
	...mapGetters(['title'])
},
methods:{
	...mapMutation(['fn'])
	...mapActions(['actionFn'])
}

有命名空间的辅助函数写法

• 普通写法

import  { mapState,  mapGetters,  mapActions,  mapMutations } from  'vuex'
// 此时第一个参数是模块化导入的key, 第二个参数是调用的属性或方法名
computed(){
	...mapState('film',['parmas'])
   ...mapGetters('film',['title'])
},
methods:{
	...mapMutation('film',['fn'])
	...mapActions('film',['actionFn'])
}

• 简单写法

// 引入之后,不需要写模块化导入的key参数
import { createNamespacedHelpers } from 'vuex'
let { mapState, mapGetters, mapActions, mapMutations } = createNamespacedHelpers('film')

computed(){
	...mapState(['parmas'])
	...mapGetters(['title'])
},
methods:{
	...mapMutation(['fn'])
	...mapActions(['actionFn'])
}