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内搭建项目实现功能最好。)