[Vuex系列] - 细说state的几种用法

ゝ一纸荒年。 2022-10-01 05:39 258阅读 0赞

state 存放的是一个对象，存放了全部的应用层级的状态，主要是存放我们日常使用的组件之间传递的变量。

我们今天重点讲解下state的几种用法，至于如何从头开始创建Vuex项目，请看我写的第一个文章。[点击查看][Link 1]

### 用法一：使用this.$store ###

我们还是以一个累加器的例子来看如何实现，具体实现代码如下：

在state.js文件中添加一个count的变量

const state = {
      count: 0
    }
    export default state
    复制代码

在src文件夹下新建一个state文件夹，并新建index.vue文件，文件内容如下：

<template>
      <div class="state">
        <h2>{
        { count }}</h2>
        <button @click="add">+ADD</button>
      </div>
    </template>
    
    <script>
    export default {
      computed: {
        count () {
          // 第一种用法
          return this.$store.state.count
        }
      },
      methods: {
        add () {
          // 第一种用法
          this.$store.state.count++
        }
      }
    }
    </script>
    
    复制代码

在Vue根实例中注册了store选项，该store实例会注入到根组件下的所有子组件中，且子组件能通过 this.$store 访问到。

### 用法二：引用store.js文件 ###

具体实现代码如下：

state.js文件内容参考上面的例子，修改state/index.vue,内容如下：

<template>
      <div class="state">
        <h2>{
        { count }}</h2>
        <button @click="add">+ADD</button>
      </div>
    </template>
    
    <script>
    import store from '@/store/store.js'
    export default {
      computed: {
        count () {
          // 第二种用法
          return store.state.count
        }
      },
      methods: {
        add () {
          // 第二种用法
          store.state.count++
        }
      }
    }
    </script>
    
    复制代码

这种方法在Vue的模块化的构建系统中，在每个需要使用state的组件中需要频繁地导入。

### 用法三：使用mapState辅助函数 ###

具体实现代码如下：

state.js文件内容参考上面的例子，修改state/index.vue,内容如下：

<template>
      <div class="state">
        <h2>{
        { count }}</h2>
      </div>
    </template>
    
    <script>
    // import store from '@/store/store.js'
    import { mapState } from 'vuex'
    export default {
      computed: mapState({
        count: state => state.count
      })
    }
    </script>
    
    复制代码

或

<template>
      <div class="state">
        <h2>{
        { count }}</h2>
      </div>
    </template>
    
    <script>
    // import store from '@/store/store.js'
    import { mapState } from 'vuex'
    export default {
      computed: {
        ...mapState(['count'])
      }
    }
    </script>
    复制代码

当一个组件需要获取多个状态时候，将这些状态都声明为计算属性会有些重复和冗余。为了解决这个问题，我们可以使用 mapState 辅助函数帮助我们生成计算属性

[一、\[Vuex系列\] - 初尝Vuex第一个例子][Link 1]

[二、\[Vuex系列\] - 细说state的几种用法][Vuex_ - _state]

[三、\[Vuex系列\] - Mutation的具体用法][Vuex_ - Mutation]

[四、\[Vuex系列\] - getters的用法][Vuex_ - getters]

[五、\[Vuex系列\] - Actions的理解之我见][Vuex_ - Actions]

[六、\[Vuex系列\] - Module的用法（终篇）][Vuex_ - Module]

转载于:https://juejin.im/post/5cbdd6bef265da038c0213b1

[Link 1]: https://juejin.im/post/5cbc189c6fb9a0688539b863
[Vuex_ - _state]: https://juejin.im/post/5cbdd6bef265da038c0213b1
[Vuex_ - Mutation]: https://juejin.im/post/5cbf3301f265da03452bdc7e
[Vuex_ - getters]: https://juejin.im/post/5cc07c99f265da03a1582e14
[Vuex_ - Actions]: https://juejin.im/post/5cc5cd02f265da0368146629
[Vuex_ - Module]: https://juejin.im/post/5cd43f20e51d456e781f20bd