Vuex使用分享

230 阅读2分钟

Vuex 使用分享

核心使用部分

  • state 状态、数据
  • mutations 行为
  • actions 动作 (此处不做讨论,因为没有涉及到异步操作)
  • getters 基于数据的一些返回值

CODE

定义(创建)

谨记一句话:不要为了使用状态管理工具(Redux、Vuex、Mobx、Flux...)而用状态管理工具!

这里我的Team Leader给我举了一个例子:Google邮箱的未读数。

在很多地方都要用到,需要全局维护一份,这样有利于保持数据的统一性,不至于在某个地方读了一封邮件之后将未读数减一后,还要通知别处,全局引用一个值,就不会存在这个问题,状态管理工具就是实现这一点的

邮箱

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);

//定义User类
class User {
    constructor(info){
        this.info = info;
    }
}

//定义数据
const state = {
    users:[]
}
//定义行为
const mutations = {
    addUser(state,info){
        state.users.push(new User(info));
    },
    updateUser(state,id,toUpdate){
        const {users} = state;
        const length = users.length;
        for(const i = 0;i<length;i++){
            let u = users[i];
            if(u.id === id){
                users[i] = {u,...toUpdate};
                break;
            }
        }
    },
    removeUser(state,id){
        const {users} = state;
        const index = users.findIndex(v=>v.id===id);
        users.splice(index,1);
    },
    findUser(state,id){
        return state.users.find(v=>v.id===id);
    }
}

//定义getters
const getters = {
    userCount:state=>state.users.length,
    //其实getUser也可以定义在此处,如下
    curUser:state=>id=>state.users.find(v=>v.id===id)
}

//定义数据仓库 - store
const store = new Vuex.store({
    state,
    mutations,
    getters
});

export default store;

好的基础是成功的一半!

绑定 & 使用

<-----------------------------------以下为绑定------------------------------>

import Vue from 'vue';
import store from './store';
window.$vm = new Vue({
    el:"#app",
    store,//在入口文件处,将store挂在Vue实例上,可以全局使用
});
<-----------------------------------以下为使用------------------------------>

<template>
    <div>
        <input 
        type="text"
        placeholder="please input user's infomation..."
        v-model="info"/>
        <button @click="addUser">AddUser</button>
        <ul>
            <li v-for="u in $store.state.users">{{u.info}}</li>
        </ul>
        <div>
            <span>current user information:</span>
            <span>{{curUser.info}}</span>
        </div>
    </div>
</template>

<script>
    export default {
        name:"App",
        data(){
            return {
                info:"",
                curUser:{info:""}
            }
        },
        methods:{
            addUser(){
                $vm.$store.commit("addUser",this.info);
            },
            //remove、update、find 大同小异,就不一一列举
            // 值得一体的是 find 既可以使用 mutations 获得,也可以通过getters 得到
            findUser(id){
               this.curUser =  $vm.$store.commit("findUser",id);
               // or 
               this.curUser = $vm.$store.getters.curUser(id);
            }
        }
    }
</script>

结语

作为入门级别,需要持续啃文档……

(代码就是直接在掘金编辑器内手敲的一些临时组织的代码,仅为了展示、会议和记录自己的使用方式和过程,并不一定能运行,想要测试的朋友,最好还是在自己的IDE内搭建项目实现功能最好。)