vuex基础知识 -state mutation actions getters 详解 modules 模块化

1.下载vuex3.6.2

2.src下创建store文件夹,index.js文件

3.导入vue 导入vuex 将vuex配置为vue插件Vue.use(Vuex) 实例化store对象 向外导出

4.main.js中导入store文件夹下的index 将store挂载在Vue实例

1.state

用于存放全局的数据

export defult new Vuex.Store({
     state:{
  属性名:属性值
    }
})

获取方法:

1.在组建里通过this.$store.state.属性名获取

2.需要在组建中按需导入得到mapState 将mapState映射成计算属性

import {mapState} from 'Vuex'

...mapState(['属性名'])

2.mutations

作用

用于修改state里面的属性(修改state里面的数据必须使用mutations)

mutations:{
  
  函数名(state,payload){
 state.state里面存储的属性名=payload
    }
 }

调用方法

方法一 : this.$store.commit('属性名',参数) 

方法二:在组件里按需导入mapMutations 将mapMutations映射成函数

import {mapMutations} from 'vuex'
...mapMutations(['函数名'])

3.actions

 作用 用于发送异步请求

actions:{
函数名(context)
//context 表示 new.Vuex.store 实例对象
context.commit('mutations里的函数',payload)
将数据传给payload 将actions里面payload传递给mutations的payload吧payload赋值给state.属性名
}

获取方法

方法一:this.$store.dispatch('mutations里面的函数名',参数) 

方法二:在组件里按需导入mapActions 将mapActions映射成函数

import{ mapActions} from'vuex'
...mapActions(['函数名'])

4.getters

作用 相当于组件内部 计算属性

getters:{
 函数名(state){
 //state就是state对象
 }
}

获取方法

方法一:this.$storegetters.属性

方法二:在组件里按需导入mapGetters 将mapGetters映射成计算属性

import {mapGetters} from 'vuex'
...mapGetters(['函数名'])

6. modules模块划分

作用 用于将vuex划分为 模块

语法 :

创建一个xxx.js文件 文件里面有四个核心成员

不同的模块都有四个成员

export default{
namespaced:true,
state:(){ //模块化时state必须是一个函数 
return:{
}
},
mutations:{},
actions:{},
getters:{}

}

在index.js里面导入

//在module文件夹下创建模块对象
import 模块对象 from '模块路径'

new Vuex.Store({
  modules:{
 //模块名:模块对象  
模块名
 }
})

所有成员的调用都需要加模块名 

通过辅助函数 获取
导入辅助函数 
exoprt default{
...mapState(['属性名'])
}