Vuex的简单使用

Vuex是怎么管理data里的数据呢

先简单看一下这张图

共享数据首先需要在state进行声明赋值，组件从State中获取数据，如果需要进行修改，需要用Action声明的函数去触发Mutation的函数去修改State里的数据，大致过程就是这样。

使用Vuex

新建store/index.js文件

初始化Store对象，导出，

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
    state: {
        
    },
    mutations: {
        //修改方法
    },
    actions: {
       //分发方法
    },
})
在main.js文件引入注册
1
2
3
4
5
6
import store from './store/index'

new Vue({
  store,
  render: h => h(App),
}).$mount('#app')
在组件中取值

在js文件中引入mapState

1
import { mapState } from "vuex";

放在computed

1
2
3
computed: {
  ...mapState(["属性名"]),
},

跟常规的计算属性是一样的

修改state里的值

取出Mutation的修改方法

在js文件中引入mapMutation

1
import { mapMutations } from "vuex";

放在methods里

1
...mapMutations(["函数名"]),

但是函数需要Action触发,引入mapActions

1
import { mapMutations } from "vuex";

放在methods里

1
...mapActions(["函数名"]),

事情流触发Actions里的函数就可以进行修改了

完整代码

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
//components.vue
<template>
  
</template>

<script>
import { mapMutations } from "vuex";
import { mapState } from "vuex";
import { mapActions } from "vuex";
export default {
  data() {
    return {};
  },
  methods: {
    ...mapMutations(["函数名"]),
    ...mapActions(["函数名"]),
  },
  computed: {
    ...mapState(["属性名"]),
  },
};
</script>

<style>
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
//store/index.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
    state: {
        
    },
    mutations: {
        //修改方法
    },
    actions: {
       //分发方法
    },
})
1
2
3
4
5
6
7
//main.js
import store from './store/index'

new Vue({
  store,
  render: h => h(App),
}).$mount('#app')

Vuex的简单使用就到这里

后面的内容属于进阶，未完待续

#Vue #Vuex
Vuex的简单使用
https://lijusting.top/posts/e2dd9df3/
作者
lijusting,
发布于
2023年2月13日
许可协议