vuex2.0小demo

最新推荐文章于 2024-05-11 05:37:07 发布

nbin斌

最新推荐文章于 2024-05-11 05:37:07 发布

阅读量9.2k

点赞数 2

分类专栏： javascript 文章标签： vue2.0 vuex2.0

本文链接：https://blog.csdn.net/nbin2008/article/details/53291779

版权

javascript 专栏收录该内容

34 篇文章 0 订阅

订阅专栏

在线效果：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>

NotesList.vue

<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>

NotesEditor.vue

<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>

nbin斌

关注

2
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
vuex2.0小demo

在线效果：https://nbin2008.github.io/demo/vuex2.0/index.html项目目录：index.html Vuex2 - noteApp 只引入了一个main.js，打包后的文件app.jsimport 'babel-polyfill';import Vue from "Vue"
复制链接

扫一扫