vuex2.0小demo
在线效果:https://nbin2008.github.io/demo/vuex2.0/index.html项目目录:index.htmlVuex2 - noteApp只引入了一个main.js,打包后的文件app.jsimport 'babel-polyfill';import Vue from "Vue"
·
在线效果:https://nbin2008.github.io/demo/vuex2.0/index.html
项目目录:
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vuex2 - noteApp</title>
<link rel="stylesheet" href="static/css/app.css">
</head>
<body>
<div id="app"></div>
</body>
<script src="build/main.js"></script>
</html>
只引入了一个main.js,打包后的文件
app.js
import 'babel-polyfill';
import Vue from "Vue";
import store from "./vuex/store.js";
import App from "./components/App.vue";
let app = new Vue({
el: '#app',
store,
render: h => h(App),
})
引入babel-polyfill,可以方便使用es6新的api
store.js
import Vue from "Vue";
import Vuex from "Vuex";
Vue.use(Vuex);
const changeListStatus = "changeListStatus";
const addNote = "addNote";
const editNote = "editNote";
const deleteNote = "deleteNote";
const toggleFavorite = "toggleFavorite";
const setActiveNote = "setActiveNote";
const state = {
isAllList: true,
notes: [],
activeNote: {},
}
const mutations = {
[changeListStatus](state,bool){
state.isAllList = bool;
},
[addNote](state) {
const newNote = {
text: 'New note',
favorite: !state.isAllList,
_rm: Math.random(),
}
state.notes.push(newNote);
state.activeNote = newNote;
},
[editNote](state, text) {
state.activeNote.text = text;
},
[deleteNote](state){
let rm = state.activeNote['_rm'];
let index = state.notes.findIndex(function(v,i){
if( rm == v['_rm'] ) return true;
return false;
});
if(index >= 0) state.notes.splice(index, 1);
state.activeNote = state.notes[0] || {};
},
[toggleFavorite](state){
state.activeNote['favorite'] = !state.activeNote['favorite']
},
[setActiveNote](state,note){
state.activeNote = note;
},
}
const actions = {
[changeListStatus]({commit},{bool}){
commit('changeListStatus', bool);
},
[addNote]({commit}) {
commit('addNote');
},
[editNote]({commit},{text}){
commit('editNote',text);
},
[deleteNote]({commit}){
commit('deleteNote');
},
[toggleFavorite]({commit}){
commit('toggleFavorite');
},
[setActiveNote]({commit},{note}){
commit('setActiveNote',note);
},
}
const getters = {
favoriteNotes: state => {
return state.notes.filter( (v,i) => v['favorite'] );
},
}
export default new Vuex.Store({
state,
mutations,
actions,
getters,
})
数据:
state.isAllList:用于判断新建笔记的时候,是否创建收藏的笔记
state.notes:笔记数组
state.activeNote:当先选中的笔记
事件:
changeListStatus:全部笔记和收藏笔记之间切换调用,用于改变state.isAllList状态
另外的事件可以根据命名看,比较好理解
vuex2.0新增了getters变量,可以直接操作需要返回的数据
App.vue
<template>
<div id="app">
<toolbar></toolbar>
<notes-list></notes-list>
<notes-editor></notes-editor>
</div>
</template>
<script>
import Toolbar from "./Toolbar.vue";
import NotesList from "./NotesList.vue";
import NotesEditor from "./NotesEditor.vue";
export default {
components: {
Toolbar,
NotesList,
NotesEditor,
}
}
</script>
页面分3块,Toolbar创建笔记,是否收藏,删除笔记
Toolbar.vue
<template>
<div id="toolbar">
<i class="glyphicon glyphicon-plus" @click="addNote"></i>
<i class="glyphicon glyphicon-star" :class="{starred: activeNote['favorite']}" @click="toggleFavorite"></i>
<i class="glyphicon glyphicon-remove" @click="deleteNote"></i>
</div>
</template>
<script>
import { mapState, mapGetters, mapActions } from "Vuex";
export default {
computed: {
...mapState({
activeNote: state => state.activeNote,
})
},
methods: {
...mapActions({
addNote: 'addNote',
toggleFavorite: 'toggleFavorite',
deleteNote: 'deleteNote',
})
},
}
</script>
<template>
<div id="notes-list">
<div id="list-header">
<h2>Notes | coligo</h2>
<div class="btn-group btn-group-justified" role="group">
<div class="btn-group" role="group">
<button type="button" class="btn btn-default" :class="{active:isAllList}" @click="changeStatus('isAll')"> All Notes </button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default" :class="{active:!isAllList}" @click="changeStatus('isFavorite')"> Favorites </button>
</div>
</div>
</div>
<div id="container">
<div class="list-group">
<a class="list-group-item" href="javascript:;" v-for="(v,k) in list" :class="{active: v['_rm']==activeNote['_rm']}" @click="setActiveNote({note:v})">
<h4 class="list-group-item-heading">{{ v['text'].length>10 ? v['text'].substring(0,10) + "..." : v['text'] }}</h4>
</a>
</div>
</div>
</div>
</template>
<script>
import {mapState, mapGetters, mapActions} from "Vuex";
export default {
data(){
return {
list: [],
}
},
computed: {
...mapState({
isAllList: state => state.isAllList,
notes: state => state.notes,
activeNote: state => state.activeNote,
}),
...mapGetters({
favoriteNotes: 'favoriteNotes',
}),
},
methods: {
...mapActions({
setActiveNote: 'setActiveNote',
changeListStatus: 'changeListStatus',
}),
changeStatus(s){
if( s == 'isAll' ){
this.changeListStatus({bool: true});
}else if( s == 'isFavorite' ){
this.changeListStatus({bool: false});
}
},
changeList(){
if( this.isAllList ){
this.$data.list = this.notes;
}else{
this.$data.list = this.favoriteNotes;
}
},
},
watch: {
notes: function(){
this.changeList();
},
isAllList: function(){
this.changeList();
},
},
mounted: function(){
this.$nextTick(function(){
this.$data.list = this.notes;
});
}
}
</script>
<template>
<div id="note-editor">
<textarea class="form-control" v-model="textVal" @change="editNote({text: textVal})"></textarea>
</div>
</template>
<script>
import {mapState, mapGetters, mapActions} from "Vuex";
export default {
data(){
return {
textVal: ""
}
},
computed: {
...mapState({
activeNote: state => state.activeNote,
})
},
methods: {
...mapActions({
editNote: 'editNote',
}),
},
watch: {
activeNote: function(){
this.$data.textVal = this.activeNote['text'];
},
}
}
</script>
更多推荐
已为社区贡献3条内容
所有评论(0)