Ashun's 技術駅
xugaoyi
2022-02-14
目录

19Vuex

# Vuex

为vue定制的数据状态管理模式。

# 1、安装&使用

npm i vuex -S
1
export default new Vuex.Store({
    state:{//数据状态(类似于data数据)
        num:1
    }
})
1
2
3
4
5

# 2、state 数据状态

定义

{{this.$store.state.num}}
1

调用

<template>
  <div>
      <p>{{this.$store.state.num}}</p>
  </div>
</template>
1
2
3
4
5

计算属性

<template>
  <div>
      {{num}}
  </div>
</template>

<script>
export default {
    computed:{
        num(){
            return this.$store.state.num
        }
    }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

辅助函数

<template>
  <div>
      {{num}}
  </div>
</template>

<script>
import {mapState} from "vuex"
export default {
    computed:{
        ...mapState(["num"])
    }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

# 3、getters 计算属性

定义

export default new Vuex.Store({
    state:{//数据状态(类似于data数据)
        msg:"hello world",
    },
    getters:{
        toReverse(state){//反转
            return state.msg.split("").reverse().join("")
        }
    }
})
1
2
3
4
5
6
7
8
9
10

使用

<template>
  <div>
      {{this.$store.getters.toReverse}}
  </div>
</template>
1
2
3
4
5

以其他getters作为参数

export default new Vuex.Store({
    state:{//数据状态(类似于data数据)
        msg:"hello world",
    },
    getters:{
        toReverse(state){//反转
            return state.msg.split("").reverse().join("")
        },
        toUpperCase(state,getters){//大写
            return getters.toReverse.toUpperCase()
        }
    }
})
1
2
3
4
5
6
7
8
9
10
11
12
13

通过方法访问

export default new Vuex.Store({
    state:{//数据状态(类似于data数据)
        arr:[{id:1,name:"小明"},{id:2,name:"小红"},{id:3,name:"小黄"}]
    },
    getters:{
        filter(state){
            return (id)=>{
                return state.arr.filter((item)=>{
                    return item.id === id
                })
            }
        }
    }
})

{{this.$store.getters.filter(2)}}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

辅助函数

<template>
  <div>
      {{toFilter(18)}}
  </div>
</template>

<script>
import {mapGetters} from "vuex"
export default {
    computed:{
        ...mapGetters(["toFilter"])
    }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

# 4、mutations 提交

vuex的事件，用于更改在state中定义的数据

定义

export default new Vuex.Store({
    state:{//数据状态(类似于data数据)
        num:1
    },
    mutations:{//同步提交
        add(state){
            state.num++
        }
    }
})
1
2
3
4
5
6
7
8
9
10

访问

<template>
  <div id="app">
    <button @click='add'>按钮</button>
    {{this.$store.state.num}}
  </div>
</template>

<script>
export default {
  name: 'App',
  methods:{
    add(){
      this.$store.commit("add")
    }
  }
}
</script>

<style>

</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

提交载荷（添加参数）

import Vue from "vue"
import Vuex from "vuex"//vuex插件

Vue.use(Vuex)//使用插件

export default new Vuex.Store({
    state:{//数据状态(类似于data数据)
        num:1
    },
    mutations:{//同步提交
        add(state,payload){
            state.num+=payload
        }
    }
})

methods:{
    add(){
      this.$store.commit("add",2)
    }
  }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

使用常量替代 Mutation 事件类型

import Vue from "vue"
import Vuex from "vuex"//vuex插件
import {ADD} from "./mutations-type.js"

Vue.use(Vuex)//使用插件

export default new Vuex.Store({
    state:{//数据状态(类似于data数据)
        num:1
    },
    mutations:{//同步提交
        [ADD](state,payload){
            state.num+=payload
        }
    }
})

export const ADD = "ADD"
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

辅助函数

<template>
  <div>
    <button @click="ADD">添加</button>
  </div>
</template>

<script>
import {mapMutations} from "vuex"
export default {
  methods: {
    ...mapMutations(["ADD"])
  },
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

# 5、actions 异步提交

vuex的异步事件，用于异步的更改在state中定义的数据。

定义

export default new Vuex.Store({
    state:{//数据状态(类似于data数据)
        num:1
    },
    mutations:{//同步提交(只有这里能修改数据)
        add(state){
            state.num++
        }
    },
    actions:{//异步提交(只有这里能写异步方法)
        aysncAdd(context){
            context.commit("add")
        }
    }
})

add(){
  this.$store.dispatch("aysncAdd")
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

简写

export default new Vuex.Store({
    state:{//数据状态(类似于data数据)
        num:1
    },
    mutations:{//同步提交(只有这里能修改数据)
        add(state){
            state.num++
        }
    },
    actions:{//异步提交(只有这里能写异步方法)
        aysncAdd({commit}){
            commit("add")
        }
    }
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

dispatch访问其他actions

import Vue from "vue"
import Vuex from "vuex"//vuex插件

Vue.use(Vuex)//使用插件

export default new Vuex.Store({
    state:{//数据状态(类似于data数据)
        num:1
    },
    mutations:{//同步提交(只有这里能修改数据)
        add(state){
            state.num++
        }
    },
    actions:{//异步提交(只有这里能写异步方法)
        aysncAdd({commit}){
            commit("add")
        },
        asyncAdd2({dispatch}){
            dispatch("aysncAdd")
        }
    }
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

提交载荷

import Vue from "vue"
import Vuex from "vuex"//vuex插件

Vue.use(Vuex)//使用插件

export default new Vuex.Store({
    state:{//数据状态(类似于data数据)
        num:1
    },
    mutations:{//同步提交(只有这里能修改数据)
        add(state,payload){
            state.num+=payload 
        }
    },
    actions:{//异步提交(只有这里能写异步方法)
        aysncAdd({commit},payload){
            commit("add",payload)
        },
        asyncAdd2({dispatch},payload){
            dispatch("aysncAdd",payload)
        }
    }
})

this.$store.dispatch("asyncAdd2",2)//派发
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

辅助函数

<template>
  <div id="app">
    <button @click="asyncAdd2(2)">按钮</button>
    {{this.$store.state.num}}
  </div>
</template>

<script>
import { mapActions } from "vuex"
export default {
  name: 'App',
  methods:{
    ...mapActions(["asyncAdd2"])
  }
}
</script>

<style>

</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

异步案例

promise

import Vue from "vue"
import Vuex from "vuex"//vuex插件

Vue.use(Vuex)//使用插件

export default new Vuex.Store({
    state:{//数据状态(类似于data数据)
        num:1
    },
    mutations:{//同步提交(只有这里能修改数据)
        add(state){
            state.num++ 
        },
        add2(state){
            state.num+=2
        }
    },
    actions:{//异步提交(只有这里能写异步方法)
        asyncAdd({commit}){
            return new Promise((resolve)=>{
                setTimeout(()=>{
                    commit("add")
                    resolve()
                },2000)
            })
        },
        asyncAdd2({commit}){
            return new Promise((resolve)=>{
                commit("add2")
                resolve()
            })
        }
    }
})

add(){
  this.$store.dispatch("asyncAdd").then(()=>{
    this.$store.dispatch("asyncAdd2")
  })
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

async await

async add(){
  await this.$store.dispatch("asyncAdd")
  await this.$store.dispatch("asyncAdd2")
}
1
2
3
4

# 6、modules 模块化

把store那功能模块分割

定义

store/index.js

import Vue from "vue"
import Vuex from "vuex"//vuex插件
import {acom} from "./modules/acom.js"
import {bcom} from "./modules/bcom.js"

Vue.use(Vuex)//使用插件

export default new Vuex.Store({
    modules:{
        acom,
        bcom
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13

store/modules/acom.js

export const acom = {
    namespaced:true,//命名空间
    state:{
        num:1
    },
    mutations:{
        add(state){
            state.num++
        }
    }
}
1
2
3
4
5
6
7
8
9
10
11

访问

//获取state
{{this.$store.state.acom.num}}

//执行getters
{{this.$store.getters["acom/add"]}}

//执行mutations
this.$store.commit("acom/add")

//执行actions
this.$store.dispatch("acom/asyncAdd")
1
2
3
4
5
6
7
8
9
10
11

辅助函数

<template>
  <div>
    <div>组件a</div>
    <div>{{ num }}</div>
    <button @click="add">按钮</button>
  </div>
</template>

<script>
import { createNamespacedHelpers } from "vuex";
const { mapState, mapMutations } = createNamespacedHelpers("acom");
export default {
  computed: {
    ...mapState(["num"]),
  },
  methods: {
    ...mapMutations(["add"]),
  },
};
</script>

<style></style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
编辑 (opens new window)
上次更新: 2023/08/06, 00:38:41
18脚手架
20VueRouter

← 20VueRouter→

最近更新
01
课件-react路由-V6
01-22
02
课件-国际化
01-22
03
课件-redux-toolkit
01-22
更多文章>
Theme by Vdoing | Copyright © 2019-2024 Evan Xu | MIT License