Vuex从了解到实际运用（二），获取vuex中的全局状态（state，getters）

前言

上篇文章给大家讲了什么是Vuex以及Vuex的核心特点，这篇文章就带大家了解实际项目中如何使用Vuex。

vuex定义state

如下图，App.vue中我们引用了两个子组件。

然后我们在store中定义一个数据，让两个组件都能访问到
store/index.js

import { createStore } from 'vuex'

export default createStore({
  state: {
    things:[
      {name: "张三", age:"18"},
      {name: "李四", age:"17"},
      {name: "王五", age:"20"},
    ]
  },
  mutations: {
  },
  actions: {
  },
  modules: {
  }
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

在创建项目的时候选上Vuex，项目初始化之后就会有store文件。因为它自动在main.js中进行了全局挂载，所以我们可以直接在组件中进行访问
one.vue：直接通过$store.state.things获取到值

<template>
  <div class="one">
    组件一
    <ul>
        <li v-for="item in $store.state.things" :key="item">
            <span>{{item.name}}</span>
            <span>{{item.age}}</span>
        </li>
    </ul>
  </div>
</template>
1
2
3
4
5
6
7
8
9
10
11

这样就成功拿到了值，组件二同理：

vuex计算属性

上面是直接在页面的template中可以通过$store.state.things获取到值，但往往我们需要对值进行监听，所在在computed中，但是在script中无法用以上方法获取到值，来看看怎么实现：

one.vue:

<template>
  <div class="one">
    组件一
    <ul>
        <li v-for="item in things" :key="item">
            <span>{{item.name}}</span>
            <span>{{item.age}}</span>
        </li>
    </ul>
  </div>
</template>

<script setup>
import { computed } from "vue"
import { useStore } from "vuex"
const store = useStore()
const things = computed(() => store.state.things)
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

我们需要引入vuex提供的useStore，利用它实例一个store对象。然后就可以通过store.state.things访问到值

通过getter获取全局状态

上面我们讲了通过state获取全局状态，来看看如何通过getter获取全局状态

在store/index.js中创建getter：

import { createStore } from 'vuex'
export default createStore({
  state: {
    things:[
      {name: "张三", age:"18"},
      {name: "李四", age:"17"},
      {name: "王五", age:"20"},
    ]
  },
  getters: {
    getProducts: (state) => {
      return state.things
    }
  },
  mutations: {
  },
  actions: {
  },
  modules: {
  }
})

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

然后在组件一的template中，我们可以通过$store.getters.getProducts获取到值。那么getters和state这两种方法有啥不同呢？在getters中我们可以对数据进行处理：
下面新增了一个resetProducts方法，在名字前后加上了 **

getters: {
    getProducts: (state) => {
      return state.things
    },
    resetProducts: (state) => {
      return state.things.map((things) => {
        return {
          name: `**${things.name}**`
        }
      })
    }
  },
1
2
3
4
5
6
7
8
9
10
11
12

然后到组件一中，我们使用$store.getters.resetProducts获取到值。
这样我们可以在getters中对初始数据进行统一的微调，方便组件进行使用