50 行代码解释 Vuex 基础使用

朱雀 2023-07-11 12:48 31阅读 0赞

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNDc3NzIx_size_16_color_FFFFFF_t_70_pic_center]

> Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化

![在这里插入图片描述][format_png]

如果在初始化项目时，选择了安装 vuex，那么无需进行这一步的安装。

安装 `npm insatll vuex --save`

import Vue from 'vue'
    import Vuex from 'vuex'
    
    Vue.use(Vuex)
    
    export default new Vuex.Store({ 
      // 存储你想要的值（一个仓库的作用）
      state: { 
        count: 0,
        str: "abcd234",
        dataList: []
      },
      // 对数据做进一步的处理
      getters: { 
        strLen: state => state.str.length
      },
      // mutations，用来改变 state 中的值。当然只能是同步操作
      mutations: {    
        increment(state, payload) { 
          // 改变state中的数据
          state.count = payload.number;
        },
        changeData(state, payload) { 
          state.dataList = payload
        }
      },
      // actions 可以是异步操作
      actions: { 
        getSong({ commit }, id) { 
          fetch('https://api.github.com/repos/vmg/redcarpet/issues?state=closed').then(res => res.json().then(res => { 
            commit('changeData', res)
          }))
        }
      }
    })

我们使用 `console.log` 将 `vuex` 打印出来

{ 
        Store: ƒ Store(options)
    	createLogger: ƒ createLogger(ref)
    	createNamespacedHelpers: ƒ (namespace)
    	install: ƒ install(_Vue)
    	mapActions: ƒ (namespace, map)
    	mapGetters: ƒ (namespace, map)
    	mapMutations: ƒ (namespace, map)
    	mapState: ƒ (namespace, map)
    }

**`Vuex` 实际上是一个对象，包含 Store这一构造函数，`mapActions`、`mapGetters`、`mapMutations`、`mapState`这几个辅助方法**

#### 获取 `state` 中的值 ####

<p>{
       { this.$store.state.count }}</p>

如果状态过多，这样的写法也是很麻烦的，Vuex 中提供了 mapState。

import {  mapState } from 'vuex'
    
    export default { 
      computed: { 
        ...mapState(['count'])
      },
    }

这样页面当中就可以直接使用 count 变量了。

<h1>{
       { count }}</h1>

#### 获取 `Getter` 中的值 ####

<h2>Getters: {
       { this.$store.getters.strLen }}</h2>

或者使用 `Vuex` 中提供了 `mapGetters`

computed: { 
      ...mapGetters(['strLen'])
    },

#### 修改 `state` 中的值 ####

对于在 `store` 中编写的 `increment` 方法。

handleClick() { 
      this.$store.commit('increment', { 
        number: 10
      })
    }

`Vuex` 中提供了 `mapMutations`

export default { 
      methods: { 
        ...mapMutations(['increment']),
        handleClick() { 
          this.increment({  number: 10})
        }
      },
    }

实际开发中，会有很多处理异步的操作，最典型的莫过于获取服务端数据。Vuex 允许在 action 中进行异步操作。

action 中需要 commit 一个 mutation。

getData() { 
      this.$store.dispatch('getSong')
    }

`Vuex` 中提供了 `mapActions`

methods: { 
      ...mapActions(['getSong']),
      getData() { 
        this.getSong()
      }
    },

对于一个仓库而言，如何获取值与设置值才是最重要的，剩下的都是花里胡哨的招式。

总结：

获取值使用 `this.$store.state` 或者是 `mapState`。如果希望对获取的值进行处理，可以使用 `getter`，获取 getter 使用 `this.$store.getters` 或者是 `mapGetters`。  
值的修改，对于同步操作，可以在 `mutations` 中编写，使用该方法可以通过 `this.$store.commit` 或者是 `mapMutations`。对于异步操作，可以在 actions 中编写，使用该方法可以通过 `this.$store.dispatch` 或者是 `mapActions`。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNDc3NzIx_size_16_color_FFFFFF_t_70_pic_center]: https://img-blog.csdnimg.cn/20210610162743772.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNDc3NzIx,size_16,color_FFFFFF,t_70#pic_center
[format_png]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly92dWV4LnZ1ZWpzLm9yZy92dWV4LnBuZw?x-oss-process=image/format,png