vue开发 vue-tutorial本地记事本

一、介绍、

项目使用的知识：vuex+vue2.0+vue-router2.0+webpack2.0+es2015语法+h5本地存储localStorage

框架搭建：采用的是官方提供的脚手架vue-cli 命令 vue init webpack vue-tutorial

代码解析：

此项目css框架采用的是bootstrap vuex，所以在项目中需要引入bootstrap，npm instrall bootstrap vuex。

vuex是vue的全局状态管理，相当于一个仓库，目录结构一般是store.js,action.js,mutation-types.js,mutation-types.js

store.js:引用vuex，导出一个Vuex.Store实例对象，本项目的totalTime是从本地中取出来的。

action.js:他主要是用来接收store.dispatch 方法触发的，同时actions 是提交 mutations 的，它可以有任意的异步操作。actions 的第一个参数是 context，它向外暴露一组与 store 实例相同的方法/属性，所以可以直接调context.commit 或者访问context.state 或者 context.getters 。我们通常使用 es6 的参数解构来简化我们的代码，直接写成 { commit }。es6参数解构通常的做法是为函数为函数设计一个对象作为参数，然后将不同的实际参数作为对象属性。

actions: {
increment ({ commit }) {
commit('increment')
}
}

mutation-types.js:建议使用大写命名 Mutation,将所有大写变量存放在一个文件中，需要的时候引入。使用 es6 的计算属性名新特性来使用常量作为方法名。在ES6的模块语法中，模块设计围绕export和import关键词，存在多个export声明，每个都要明确的指出输出值得类型。本例中的import声明使用一种语法，来明确定义被导入的内容，可以使用*通配符，结合as关键词给模块提供一个本地名称，把模块当成一个整体导入：import*as math form"lib/math.js";

mutation.js:更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。Vuex 中的 mutations 非常类似于事件：一个字符串的事件类型 (type) 和一个回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数：

值得注意的的是：本项目的新增计划需要保存到localstroage里边，JSON.stringify把对象转化为字符串JSON.parse把字符串转化为对象。

 
 localStorage.
 setItem(
 'vuePlanList', 
 JSON.
 stringify(
 newplan))

版权声明：本文来源CSDN，感谢博主原创文章，遵循 CC 4.0 by-sa 版权协议，转载请附上原文出处链接和本声明。
原文链接：https://blog.csdn.net/servers_zhangyu/article/details/63262623
站方申明：本站部分内容来自社区用户分享，若涉及侵权，请联系站方删除。

发表于 2021-05-30 08:55:22
阅读 ( 558 )
分类：前端

vue开发 vue-tutorial本地记事本

你可能感兴趣的文章

精选的优质文章

0 条评论

官方社群

GO教程

推荐文章

猜你喜欢

随便看看