状态管理之Vuex (一) 基操勿六

Vuex是对状态的管理, 这里的状态所指的就是data
以前我们的组件通信一直是个问题,例如兄弟组件通信,这个时候就比较难办,如果使用Vuex就可以很轻松的解决这个问题。
Vuex可以将你以前放在data里面的一些数据放在store里面,那这样大家都从store里面获取数据,store数据一改变,那么其他使用这个数据的组件也改变了。(好用的很👌)

基操

  • 安装

yarn add vuex

  • 创建store
import Vuex from 'vuex'
Vue.use(Vuex)
  • 声明store, src/store/index.js
import Vuex from 'vuex';
import Vue from "vue";
Vue.use(Vuex);          

const state = {
    data: 'this is Vuex state'  // 在Vuex里面声明一个状态
};
const mutations = {
    changeData: function(state, newData) {
        state.data = newData;  // 在Vuex里面去修改这个状态        ,凡是要想修改state里面的数据,就要使用mutations里面的函数 
    }
};

// 创建store, 传入Vuex的核心概念之 state,mutations
const store = new Vuex.Store({
    state: state,
    mutations: mutations
});

export default store;

虽然现在已经有了一个store, 但是并没有在组件里面使用, 如果我现在需要把store里面的数据拿出来渲染, 并且修改Vuex里面的数据, 使得数据改变, 页面也随着改动。

  • 使用到组件中,使得数据响应

views/Home/Home.vue

<template>
    <div class="VuexDemo">
        <div>vuex demo<div>
        name is {{name}}
        <button @click="changeName">修改名称</button>
    </div>
</template>

<script>

import store from '../../store/index';
// 这个时候需要把store中的状态展示到页面中, 我们会在computed里面声明, 让他去获取store里面的数据

export default {
    
    // 这样页面中就可以使用name变量, 然后就可以获取store里面的data数据, 使用computed这样还可以缓存数据, 对于优化也是很不错的
    computed: {
        name() {
            return store.state.data
        }
    },
    
    methods: {
        changeName() {
            // 点击事件触发这个函数, 再由这个函数去触发 Vuex里面的mutation。commit去调用mutation里面的函数,第一个参数是对应mutation里面的函数名,第二个是参数
            store.commit('changeData', 'this is new Vuex State');
        }
    },
}
</script>

这样一套流程的话,从store里面获取数据,然后再修改store里面的数据重新渲染,这样就已经是对状态的一种管理了。
但是单单这样使用, 还是存在一些问题。
如果说state里面数据特别多, 那我岂不是写了很多没啥der用的computed, 重复劳动了这不是。Vuex提供了一个函数mapState

views/Home/Home.vue


// 之前
computed: {
    name() {
        return store.state.data
    }
}


// 使用mapState
computed: mapState({
    // 箭头函数可使代码更简练
    count: state => state.count,

    // 传字符串参数 'count' 等同于 `state => state.count`
    countAlias: 'count',

    // 为了能够使用 `this` 获取局部状态,必须使用常规函数
    countPlusLocalState (state) {
      return state.count + this.localCount
    }
  })

这样的话起码对store里面多个数据 传递到组件中是可以解决了。这篇就到这里了,Vuex打算多写几篇,写到细一点,把坑说一下,那在Vuex里面如何进行异步操作呢?虽然可以在组件中进行请求完了,然后再commit, 但是代码也会在UI组件中增加, Vuex有没有解决方案呢?请看下篇!

  • 前情提要: mutations 里面只能修改state, 并且只能是同步
  • 如果在使用store之前没有Vue.use(Vuex) 必然在使用过程中出现 vuex computed Cannot read property 'state' of undefined"错误,小心点 靓仔

本文为作者原创,手码不易,允许转载,转载后请以链接形式说明文章出处。

您的支持是对我最大的鼓励!

发表于: 作者:憧憬。
关注互联网以及分享全栈工作经验的原创个人博客和技术博客,热爱编程,极客精神
Github 新浪微博 SegmentFault 掘金专栏