Vuex命名空间的使用

Vuex

一.解决的问题

不同的数据之间需要保持同步

数据的修改是可以追踪的

多个组件之间需要共享数据的时候(跨组件通信)

父与子之间props,兄弟之间this.$emit还是需要用vue中的数据传输

二.什么是Vuex

Vuex是专门为Vue.js应用程序开发的状态管理模式;他采用集中式存储管理数据

三.官网:官网地址: Vuex 是什么？ | Vuex

四.配置项

stata:数据的存储位置 相当于data 组件和模块中是函数形式

state(){return{}}

mutations:唯一可以处理数据的,存储的是同步代码

actions:异步请求,修改数据需要提交到mutations后执行,他是处理异步代码(axios,事件,定 时器)

store.commit("mutations中的函数名")

getters:vuex中的计算属性,相当于vue中的computed

modules: 模块拆分

五.使用vuex步骤

1.下载

npm i vuex -S yarn add vuex

2.创建store 中 index.js文件

import vue from"vue"

import vuex from "vuex"

Vue.use(Vuex)

//创建实例仓库

const store = Vuex.Store({

state:{},

mutations:{

函数名(state,val){

}

},

actions:{

函数名(store,val){

异步代码..

store.commit("mutations中的函数名",val)

}

},

getters:{

计算属性名(state){

return 值

}

},

mudules:{}

})

//默认导出store对象,因为他只需要导出一次,所以使用默认导出

export default store

3.给main.js上挂载仓库

import store from "路径"

new Vue({

store,

}).$mount("#app")

state

方式1.直接使用

this.$store.state.数据

方式2.映射

//导入state的辅助对象

import { mapstate } from "vuex"

export default{

computed:{

...mapState(["数据名字"])

//如果想变名字使用对象的形式

...mapState({变后的名字,"state中的名字"})...mapState({list:getinitlist})

}}

在模块中:

1.直接使用:

this.$store.state.模块名.数据

2.映射:

...mapState("模块名",["数据"])

mutations

方式1.直接使用

this.$store.commit("函数的名字",val)

方式2.映射

//导入辅助对象

import { mapmutations } from "vuex"

export default{

methods:{

...mapMutations(['''函数名'])

能调用这个的另一个函数(){

this.函数名(val) //可以传参数

}

}

在模块中:

1.直接使用:

this.$store.commit("模块名/函数名",val)

2.映射:

...mapMutations("模块名",["函数名"])

actions

方式1.直接使用

this.$store.dispatch("函数的名字",val)

方式2.映射

//导入辅助对象

import {　mapActions　｝from "vuex"　

export default {

methods:{

...mapActions(['里面的函数名'])

另一个函数名(){

this.actions里面的函数(val)

}

}

}

在模块中:

1.直接使用:

this.$store.dispatch("模块名/函数名",val)

2.映射:

...mapActions("模块名",["函数名"])

Getters

方式1.直接使用

this.$store.getters.计算属性名

方式2.映射

//导入辅助函数

import { mapGetters } from "vuex"

export default{

cpmputed:{

...mapGetters(["计算属性"])

}

}

在模块中:

1.直接使用:

this.$store.getters["模块名/计算属性名"] 有不合法的/所以一定要[] 不能用.

2.映射:

...mapGetters("模块名",["计算属性"])

六.设置模块对象

步骤一

1.每一个模块都有以上的数据(5个核心)

例如:

cart.js ------购物车对象

//定义

const cartModule = {

5个核心模块

}

//导出

export default cartModule

2.回到store.js中注册模块

//导入子模块

import CartModule(默认导入的名字随便取) from "cart.js路径"

const store = new Vuex.Store({

//分模块

modules:{

cart(必须跟cart.js的路径名字一致):CartModule

}

})

export default store

七.命名空间

1.目的:为了防止多个模块中的5个核心的中的名字起冲突

在每一个模块中加入一句话

namespaced:true