vuex存取值的两种方式

一、vuex的执行流程及使用时机

执行流程:组件通过dispatch调用action,action通过commit来触发mutation,mutation来负责修改state,state修改后去重新渲染受影响的dom。

使用时机:vuex 更多地用于解决跨组件通信以及作为数据中心集中式存储数据。

二、安装和引入及挂载

​ 阅读文章:https://blog.csdn.net/qq_32099833/article/details/103000552

三、使用

1、方式一

  • 第一种使用方式:简单 (官方不推荐,但简单)
    1
    2
    3
    4
    从store中获取值:$store.state.a
    从getters中获取值:$store.getters.getA
    改变vuex的值(同步): $store.commit('add',5)"
    改变vuex的值(异步): $store.dispatch('add',5)"

2、方式二

  1. 第二种使用方式: 映射函数(官方推荐,但麻烦)
    (1)映射关系:
    1
    2
    3
    4
    mapState > computed
    mapGetters > computed
    mapMutations > methods
    mapActions > methods
    (2)mapState:通过computed来获取,但是如果需要获取多个值就会很麻烦
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    <template>
    <div>
    a:{{a}}
    <br>
    b:{{b}}
    </div>
    </template>

    <script>
    import {mapState} from 'vuex';
    export default {
    name: "MapState",
    computed:{
    //将store.state中的属性映射到computed
    ...mapState(['a','b'])
    }
    }
    </script>
    (3)mapState:通过computed来获取,但是如果需要获取多个值就会很麻烦
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    <template>
    <div>
    a={{getA}}
    <br>
    b={{getB}}
    <br>
    a+b={{count}}
    </div>
    </template>

    <script>
    import {mapGetters} from 'vuex';
    export default {
    name: "MapGetters",
    computed:{
    //将store.getters映射到computed
    ...mapGetters(['getA','getB','count'])
    }
    }
    </script>
    (4)mapMutations:同步
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    <template>
    <div>
    a={{$store.state.a}}
    <br>
    b={{$store.state.b}}
    <br>
    a+b={{$store.getters.count}}
    <hr>
    <button @click="addA(5)">a+5</button>
    </div>
    </template>

    <script>
    import {mapMutations} from 'vuex';
    export default {
    name: "MapMutations",
    methods:{
    //将store.mutations映射到methods
    ...mapMutations(['addA'])
    }
    }
    </script>
    (5) mapActions:异步
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    <template>
    <div>
    a={{$store.state.a}}
    <br>
    b={{$store.state.b}}
    <br>
    a+b={{$store.getters.count}}
    <hr>
    <button @click="$store.dispatch('addA',5)">a+5</button>
    </div>
    </template>

    <script>
    import {mapActions} from 'vuex';
    export default {
    name: "MapActions",
    methods:{
    //将store.actions映射到methods
    ...mapMutations(['addA'])
    }
    }
    </script>

四、Modules

​ 当系统比较庞大时,store会变得非常臃肿。
​ 为了方便store的模块化管理,Vuex 允许我们将 store 分割成 modules。

​ 每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块。

五、在vue3.0中使用

  1. 通过getCurrentInstance指向this
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    <script>
    import { getCurrentInstance} from "vue";
    export default {
    setup(){
    //getCurrentInstance代表全局上下文,ctx相当于Vue2的this,
    //但是特别注意ctx代替this只适用于开发阶段,等你放到服务器上运行就会出错,
    //后来查阅资料说的得用proxy替代ctx,才能在你项目正式上线版本正常运行
    let {ctx,proxy}=getCurrentInstance();
    proxy.$store.state.a
    };
    }
    </script>