在使用单一状态树,应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时,store 对象就有可能变得相当臃肿。为了解决以上问题,Vuex 允许我们将 store 分割成模块(module)。每个模块拥有自己的state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割:
注意:
//src根目录下的store.js不能删掉,但是可以注释掉不用
如何使用module
moduleA.js文件内容如下:
//在store文件夹下新建modules文件夹,并在下面建立moduleA.js和moduleB.js文件用来存放vuex的modules模块
const state = {
stateA: 'A'
}
const mutations = {
showA (state) {
return state.stateA
}
}
const actions = {
showAAction (context) {
context.commit('showA')
}
}
const getters = {
getA (state) {
return state.stateA
}
}
export default {namespaced: true,state, mutations, actions, getters}
moduleB.js文件内容如下:
const state = {
stateB: 'B'
}
const mutations = {
showA (state) {
return state.stateB
}
}
const actions = {
showAAction (context) {
context.commit('showB')
}
}
const getters = {
getA (state) {
return state.stateB
}
}
// namespaced 属性,限定命名空间
export default {namespaced: true,state, mutations, actions, getters}
//namespaced写成true,actions, mutations, getters, 可以限定在当前模块的命名空间中、意思就是可以用这个module名作为区分了(也就是module所在的文件夹名)
//比如import moduleA from './modules/moduleA/moduleA'//引进模块 moduleA文件夹名作为区分、作为当前模块的命名
store.js 文件内容如下:
//state mutations actions 可以分别独立j创建js文件,然后再引进store.js或者当前模块
import Vue from 'vue'
import Vuex from 'vuex'
import state from './state'
import mutations from './mutations' //引进独立创建的mutations .js
import getters from './getters'//引进独立创建的getters.js
import actions from './actions'//引进独立创建的actions.js
import moduleA from './modules/moduleA/moduleA'//引进模块
import moduleB from './modules/moduleB/moduleB'
Vue.use(Vuex)
const store = new Vuex.Store({
state,//独立js文件
mutations,//独立创建的mutations.js文件
getters,
actions,
modules: {
moduleA,
moduleB
}
export default store
//或者这样
export default new Vuex.Store({
state: {
a : true
},
mutations: {
},
actions: {
},
//vueX模块
modules:{
moduleA,
moduleB
}
})
//一个js文件可以用两个或多个模块
const modules1 = {
state: {
a: '我是模块化1'
},
mutations: {},
actions: {}
}
const modules2 = {
state: {
a: '我是模块化2'
},
mutations: {},
actions: {}
}
export default {
modules1,
modules2
}
在组件中使用
<template>
<div class="modules">
<h1>{{moduleA}} --- {{moduleB}} --- {{getmoduleA}}</h1>
//namespaced 属性,限定命名空间
<h1 @click ="alertName">{{useName}}</h1>
<button @click="changeName"> change to json</button>
</div>
</template>
<script>
import {mapActions, mapState,mapGetters} from "vuex";
export default {
data () {
return {}
},
computed: {
...mapState({
moduleA: state => state.moduleA.stateA,
moduleB: state => state.moduleB.stateB
})
//命名空间写法
...mapState("moduleA",{//moduleA为命名空间,指定modules
moduleA: state => state.moduleA.stateA,
}),
//指定imoduleA的getter
getmoduleA() {
return this.$store.getters["moduleA/getA "]
}
...mapGetters("moduleA", ["getA "])
},
methods: {
changeName() {
this.$store.dispatch("moduleA/showAAction ", "moduleA")
},
...mapActions('moduleA', ['showAAction '])
}
}
</script>
1、模块动态注册
在 store 创建之后,你可以使用 store.registerModule 方法注册模块:
// 注册模块 `myModule`
store.registerModule('myModule', {
state:{},
getters:{},
mutations:{}
actions{}
})
// 注册嵌套模块 `nested/myModule`
store.registerModule(['nested', 'myModule'], {
})
之后就可以通过 store.state.myModule 和 store.state.nested.myModule 访问模块的状态。模块动态注册功能使得其他 Vue 插件可以通过在 store 中附加新模块的方式来使用 Vuex 管理状态。例如,vuex-router-sync 插件就是通过动态注册模块将 vue-router 和 vuex 结合在一起,实现应用的路由状态管理。你也可以使用 store.unregisterModule(moduleName) 来动态卸载模块。注意,你不能使用此方法卸载静态模块(即创建 store 时声明的模块)。
2.卸载动态模块
this.$store.unregisterModule("myModule")
3.举个例子及实现demo
b1c29f3d57e94d4c2495d6d9ec8cee4.png
cb42203f0d0694a7bdfd54fab37ba0b.png
image.png
image.png
image.png
image.png
在 Vue 组件中获得 Vuex 状态:state
获取state的几种方法:
1
export default{
computed:{
orderList(){
return this.$store.state..;
}
}
}
2
mapState 辅助函数映射到当前组件:
import { mapState} from "vuex";
export default {
// ...
computed: mapState({
// 箭头函数可使代码更简练
count: state => state.count,
// 传字符串参数 'count' 等同于 `state => state.count`
countAlias: 'count',
// 为了能够使用 `this` 获取局部状态,必须使用常规函数
countPlusLocalState (state) {
return state.count + this.localCount
}
})
}
//当映射的计算属性的名称与 state 的子节点名称相同时,我们也可以给 mapState 传一个字符串数组
computed: mapState([
// 映射 this.count 为 store.state.count
'count'
])
Getter
有时候我们需要从 store 中的 state 中派生出一些状态,处理一些数据、例如对列表进行过滤并计数:
computed: {
doneTodosCount () {
return this.$store.state.todos.filter(todo => todo.done).length
}
}
如果有多个组件需要用到此属性,我们要么复制这个函数,或者抽取到一个共享函数然后在多处导入它——无论哪种方式都不是很理想。
Vuex 允许我们在 store 中定义“getter”(可以认为是 store 的计算属性)。就像计算属性一样,getter 的返回值会根据它的依赖被缓存起来,且只有当它的依赖值发生了改变才会被重新计算。
Getter 接受 state 作为其第一个参数:
const store = new Vuex.Store({
state: {
todos: [
{ id: 1, text: '...', done: true },
{ id: 2, text: '...', done: false }
]
},
getters: {
doneTodos: state => {
return state.todos.filter(todo => todo.done)
}
}
})
通过属性访问
Getter 会暴露为 store.getters 对象,你可以以属性的形式访问这些值:
store.getters.doneTodos // -> [{ id: 1, text: '...', done: true }]
Getter 也可以接受其他 getter 作为第二个参数:
getters: {
// ...
doneTodosCount: (state, getters) => {
return getters.doneTodos.length
}
}
store.getters.doneTodosCount // -> 1
我们可以很容易地在任何组件中使用它:
computed: {
doneTodosCount () {
return this.$store.getters.doneTodosCount
}
}
通过方法访问
你也可以通过让 getter 返回一个函数,来实现给 getter 传参。在你对 store 里的数组进行查询时非常有用。
etters: {
// ...
getTodoById: (state) => (id) => {
return state.todos.find(todo => todo.id === id)
}
}
store.getters.getTodoById(2) // -> { id: 2, text: '...', done: false }
//注意,getter 在通过方法访问时,每次都会去进行调用,而不会缓存结果。
mapGetters 辅助函数
mapGetters 辅助函数仅仅是将 store 中的 getter 映射到局部计算属性:
import { mapGetters } from 'vuex'
export default {
// ...
computed: {
// 使用对象展开运算符将 getter 混入 computed 对象中
...mapGetters([
'doneTodosCount',
// ...
])
}
}
//如果你想将一个 getter 属性另取一个名字,使用对象形式:
...mapGetters({
// 把 `this.doneCount` 映射为 `this.$store.getters.doneTodosCount`
doneCount: 'doneTodosCount'
})
demo
//在这使用...mapGetters(['shoplist'])映射的数据
<tr v-for="n in shoplist">
<td>{{n.id}}</td>
<td>{{n.name}}</td>
<td>{{n.price}}</td>
<td><span @click="addtocart(n)">加入购物车</span></td>
</tr>
<script>
import {mapState,mapGetters,mapActions } from 'vuex' //导入辅助函数
export default {
computed:{
//mapGetters辅助函数仅仅是将 store 中的 getter ['shoplist']映射到局部计算属性
//获取到getter的shoplist数据
...mapGetters(['shoplist'])//把store文件getter里面shoplist映射到组件里,拿到的是数据,不是函数
}
}
</script>
store文件:
//向外输出数据的方法,然后怎么把这些数据弄到需要的组件上呢?
//在需要数据的组件import {mapState,mapGetters,mapActions } from 'vuex' //导入辅助函数
//然后...mapGetters(['shoplist'])
const getters ={
//商品列表数据
shoplist:state=>{
return state.shoplist
}
Mutation
Mutation可以进行vuex的状态修改、并且它会接受 state 作为第一个参数:
在项目中,经常使用到VUEX状态管理,对于小项目中,直接使用下述述两种方法即可。
this.$store.commit('increment ','a') //increment事件类型,即mutation的方法名 a需要传的参数
或者
this.$store.dispatch('increment ','a')//a需要传的参数
//对象风格的提交方式
//提交 mutation 的另一种方式是直接使用包含 type 属性的对象:
store.commit({
type: 'increment',//事件类型
amount: a //需要传的参数
})
//在store的mutations中注册一个名为increment的监听及监听触发后的函数体,
//当监听到名为'increment'的commit事件时,会触发store中mutations下increment函数
const store = new Vuex.Store({
state: {
count: 1
},
//提交载荷(Payload)
//mutation的载荷payload是作为store.commit传入的额外参数存在的。
mutations: {
increment (state,payload) {//载荷payload接受commit或者dospatch传过的参数
// 变更状态
state.count++
}
}
// 另一种写法
mutations: {
increment: {
handler: () => {
// 逻辑函数
},
// 事件类型
type: 'increment'
}
}
})
但是,当项目中的 mutation 或者 action 过多的时候,这样一个个的写就显得比较麻烦。
你可以在组件中使用 this.$store.commit('xxx') 提交 mutation,或者使用 mapMutations 辅助函数将组件中的 "methods" 映射为 store.commit 调用(需要在根节点注入 store)。
import { mapMutations } from 'vuex'
export default {
// ...
methods: {
...mapMutations([
'increment', // 将 `this.increment()` 映射为 `this.$store.commit('increment')`
// `mapMutations` 也支持载荷
//mutation的载荷payload是作为store.commit传入的额外参数存在的。
'incrementBy' // 将 `this.incrementBy(amount)` 映射为 `this.$store.commit('incrementBy', amount)`
]),
...mapMutations({
add: 'increment' // 将 `this.add()` 映射为 `this.$store.commit('increment')`
})
//add是我们自己定义的事件名称,increment是action的事件类型。当我们自己定义的事件名称与action的事件类型相同,可写成这样:
...mapMutations(["increment"])
}
}
demo
页面文件:
<tr>
<td><span @click="add">加入购物车</span></td>
<td><span @click="reduce">加入购物车</span></td>
</tr>
<script>
import {mapActions } from 'vuex' //导入辅助函数
export default {
methods:{
...mapMutations(['add' , 'reduce'])//通过点击事件add和reduce调用 提交到store.js的mutations
}
}
</script>
样的写法可以让我们在组件中像写普通方法一样,直接调用mutations里的方法,把mutations里的方法名直接写在需要调用的地方就行
但是mutations对象中的方法是可以传参的(payload),那么在mapMutations中如何传参呢?
<tr>
<td><span @click="add(5)">加入购物车</span></td>
<td><span @click="reduce">加入购物车</span></td>
</tr>
<script>
import {mapMutations} from 'vuex' //导入辅助函数
export default {
methods:{
//add的参数会自动映射store文件的mapMutations
...mapMutations(['add' , 'reduce'])//通过点击事件add和reduce调用 提交到store.js的mutations
}
}
在store.js里面
mutations: {
add(state,n) {//载荷n接受commit或者dospatch传过的参数
// 变更状态
},
reduce(state) {//无传参
// 变更状态
},
}
mapActions mapMutations 必须放在 methods中,因为 action 或者 mutation 都是方法.
所以,vue提供了 mapActions和mapMutations 。两者使用方法相似,下面以 mapActions为例。
Actions
Action 类似于 mutation,不同在于:
Action 提交的是 mutation,而不是直接变更状态,也就是在Action处理好异步,再提交到mutation修改。
Action 可以包含任意异步操作。
注册一个简单的 action:
const store = new Vuex.Store({
state: {
count: 0
},
mutations: {
increment (state) {
state.count++
}
},
actions: {
increment (context) {
context.commit('increment')
}
}
})
Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象,因此你可以调用 context.commit 提交一个 mutation,或者通过 context.state 和 context.getters 来获取 state 和 getters。
实践中,我们会经常用到 ES2015 的 参数解构 来简化代码(特别是我们需要调用 commit
很多次的时候):
actions: {
increment ({ commit }) {
commit('increment')
}
}
分发 Action
Action 通过 store.dispatch 方法触发:
store.dispatch('increment')
乍一眼看上去感觉多此一举,我们直接分发 mutation 岂不更方便?实际上并非如此,还记得 mutation 必须同步执行这个限制么?Action 就不受约束!我们可以在 action 内部执行异步操作:
actions: {
incrementAsync ({ commit }) {
setTimeout(() => {
commit('increment')
}, 1000)
}
}
//Actions 支持同样的载荷方式和对象方式进行分发:
// 以载荷形式分发
store.dispatch('incrementAsync', {
amount: 10
})
// 以对象形式分发
store.dispatch({
type: 'incrementAsync',
amount: 10
})
demo
<template>
</template>
<script>
export default{
data(){
return {
}
},
methods:{
},
created(){//created一般都是需要异步操作
//通过store的dispatch方法分发任务给action
this.$store.dispatch("setPlayStatus",{
playStatus:true //这里的值还没改的,只是分发到action,在mutations才真正的改
})
}
}
</script>
store.js
import Vue from 'vue'
import Vuex from 'vuex'
import state from '@/vuex/state.js'
Vue.use(Vuex)
export default new Vuex.Store({
state: { //声明全局变量任何组件都可以拿到他
token:false, //修改token的值:例子在home页面提交数据给stores.js的mutations修改
playStatus:false , //异步修改playStatus的值:
},
mutations: {//改变state状态的唯一方法 commit发送过来,通过mutations才是改变的 、、不支持异步
setToken(state,data){
/*
* 这个函数接收两个参数,
* state:指的是vuex中的state属性
* data:用户通过commit发送过来的数据
*/
state.token=data.token //改变state的token的值
console.log(state,data);
},
//异步修改状态
setPlayStatus(state,data){
state.playStatus = data.playStatus;
console.log("state",state) //state是vuex的state属性
}
},
actions:{
//解决异步请求
//再提交给mutations修改 {commit} 是对象解构赋值,因为action里面的方法默认接受一个参数context,
setPlayStatus({commit},data){//context的实例化对象
console.log("context",context)
commit("setPlayStatus",data)
}
},
getters:{//相当于实例中的计算属性,用法跟计算属性一样
}
})
mapActions辅助函数分发actions
import { mapActions } from 'vuex'
export default {
// ...
methods: {
...mapActions([
'increment', // 将 `this.increment()` 映射为 `this.$store.dispatch('increment')`
// `mapActions` 也支持载荷:
'incrementBy' // 将 `this.incrementBy(amount)` 映射为 `this.$store.dispatch('incrementBy', amount)`
]),
...mapActions({
add: 'increment' // 将 `this.add()` 映射为 `this.$store.dispatch('increment')`
})
//add是我们自己定义的事件名称,increment是action的事件类型。当我们自己定义的事件名称与action的事件类型相同,可写成这样:
...mapActions(["increment"])
}
}
mapActions 必须放在 methods中,因为 action 或者 mutation 都是方法.
demo2
<button @click="add(5)">+1</button>
//组件分发
//简写
...mapActions({
add: "increment"
})
//实际上的写法
methods:{
increment(n){
this.$store.dispatch("increment",n)
}
}
add是我们自己定义的事件名称,increment是action的事件类型。当我们自己定义的事件名称与action的事件类型相同
<button @click="increment(5)">+1</button>
...mapActions(["increment"])
store.js
mutations: {//改变state状态的唯一方法 commit发送过来,通过mutations才是改变的 、、不支持异步
INCREMENT(state,data){
/*
* 这个函数接收两个参数,
* state:指的是vuex中的state属性
* data:用户通过commit发送过来的数据
*/
console.log(state,data);
},
actions: {
//分发到mutation修改状态
increment({commit},data){
commit("INCREMENT",data)
},
}
//{commit} 是对象解构赋值,因为action里面的方法默认接受一个参数context,
//context是store的一个实例,这个实例是一个对象,改写法是表明使用context中的commit方法。es6的语法
辅助函数actions传参跟mutations一样
例子1:
页面文件:
<tr v-for="n in shoplist">
<td>{{n.id}}</td>
<td>{{n.name}}</td>
<td>{{n.price}}</td>
<!--把点击的那一项作为参数传递过去-->
<td><span @click="addtocart(n)">加入购物车</span></td>
</tr>
<script>
import {mapState,mapGetters,mapActions } from 'vuex' //导入辅助函数
export default {
methods:{
...mapActions(['addtocart'])//引进store文件actions定义的addtocart函数,通过点击事件addtocart调用
}
//这里的意思是通过模块名来获取到login,renewToken这个函数,(common就是模块名)
...mapActions("common", ["addtocart", 'renewToken']),//通过引进引进store文件actions定义的login函数
}
</script>
store文件
const mutations={
//添加到购物车的操作
addtocart(state.data){
//
}
const actions={
//添加到购物车的操作
addtocart({commit},n){
//console.log(n.name);
//提交到mutations修改原数组
commit('add',{
id:n.id
})
}
例子2:
<script>
ecport default{
methods:{
//这里的意思是通过模块名来获取到addtocart,renewToken这个函数,(config就是模块名)
...mapActions("common", ["addtocart", 'renewToken']),//通过引进引进store文件actions定义的addtocart、renewToken函数
async handleLogin (){
try {
this.errorMessage = "";
const res = await this.login(this.loginForm);//this.loginForm是一个对象, 在这调用引进的login(this.loginForm)
}catch(err){
console.error(err);
}
}
}
}
</script>
Vue项目中使用Vuex + axios发送请求 转自https://www.cnblogs.com/junwu/p/11195596.html
computed: {
geneObj () { // 获取store里的数据,放在computed中可以实时更新
return this.$store.state.geneObj ;
}
},
methods:{
getGene(){
this.$store.dispatch('getGeneAction');//触发actions里的saveForm函数,调动接口
//getDatamingData().then(this.getGeneSucc);
/*
axios.get(urlApi.datamining)
.then(this.getGeneSucc);
*/
},
//也可以通过actions发送请求,在当前组件处理数据:
getGene() {
var _vm = this;//避免this不是这些vue实力
_vm.$store.dispatch('getGeneAction').then(function(res) { // 回调函数是普通函数
console.log(res);
})
}
//或:
getGene() {
this.$store.dispatch('getGeneAction').then(function(res) { // 回调函数是普通函数
console.log(res);
}.bind(this))
}
}
*注释掉的是以前直接在方法中获取接口数据
在我的store.js
state:{
geneObj :" "
},
action:{
getGeneAction(context,item){
console.log('getGeneAction');
//调用axios
getDatamingData().then((res) => {
context.commit('GETGENEMUTATION',res);
});
}
},
//派发一个GETGENEMUTATION mutation
mutation:{
GETGENEMUTATION(state,item){
//console.log(item.data.obj);
state.geneObj = item.data.obj;
}
}
Vuex:不同模板(module)之间分发 action 或提交 mutation
————————————————
版权声明:本文为CSDN博主「不愿意透露姓名的攻城诗」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/github_35830425/article/details/88670982
场景:卖书的商城,在书籍商品显示详情页的时候需要去获取相关的作者信息,书籍表通过authorId字段关联作者表中的作者。所以考虑方案:在详情页先获取书籍信息,然后通过authorId去查找作者信息。
实现:创建两个状态管理的module:book.js 和 author.js ,然后在详情页:bookDetail.vue中去管理状态。
// author.js
export default {
namespaced: true,
state: {
author: {}
},
getters: {},
mutations: {
setAuthor: function (state, author) {
state.author = author
}
},
actions: {
//获取作者详情
getAuthorName: function ({ commit }, authorId) {
Author.getAuthorById(authorId).then(res=> {
commit('setAuthor', res.author)
})
}
}
}
// book.js
export default {
namespaced: true,
state: {
// 正在查看的书本详情
currentBook: {}
},
getters: {
// ...
showBook (state) {
return state.currentBook
}
},
mutations: {
// ...
setCurrentBook (state, book) {
state.currentBook = book
}
},
actions: {
// ...
// 根据id获取书籍详情
getBookDetailById ({ commit, dispatch }, id) {
// Shop.getBookDetailById是api
Shop.getBookDetailById (id).then(res = >{
//分发到mutation获取书籍详情
commit('setCurrentBook', res.book)
// 获取作者详情
// todo: {root:true} 很重要,如果没有添加的话,此处会报错
//分发到 author.js模板的mutations
dispatch('BookDetail/getAuthorName', res.book.authorId, { root: true })
})
}
}
}
刚开始做的时候没有加{ root : true }导致报错,查找文档资料后发现以下描述:
在带命名空间的模块内访问全局内容(Global Assets)
如果你希望使用全局 state 和 getter,rootState 和 rootGetter 会作为第三和第四参数传入 getter,也会通过 context 对象的属性传入 action。
若需要在全局命名空间内分发 action 或提交 mutation,将 { root: true } 作为第三参数传给 dispatch 或 commit 即可。
所以需要分发其他模板的action或者提交其他模板的mutation的时候,需要加上{ root: true }
然后只需在bookDetail.vue页面去获取状态即可
// bookDetail.vue
export default {
name: 'ProductDetail',
state: {
return () {
// ...
'bookId': '201903190001'
}
},
computed: {
// ...
// 获取当前书籍信息
// 可直接通过 this.book 使用
...mapState('book', {
book: 'currentBook'
}),
// 获取作者信息
// 可直接通过 this.author 使用
...mapState('author', {
author: 'author'
})
},
methods: {
// ...
...mapActions({//book/getBookDetailById命名空间、调用指定名字为book的moduls的action
getBookDetailById: 'book/getBookDetailById'
})
},
created () {
// 获取商品详情 就是mapActions定义的事件名getBookDetailById
this.getBookDetailById(this.bookId)
}
}
</script>
...
}
网友评论