状态管理之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"错误，小心点靓仔

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