vue-cil+vuex 构建一个简单的记事本应用

最新推荐文章于 2023-08-04 13:01:55 发布

ccessl

最新推荐文章于 2023-08-04 13:01:55 发布

阅读量1.5k

点赞数

分类专栏： vue 文章标签： vuex vue-cil 记事本

本文链接：https://blog.csdn.net/cc_fys/article/details/81104279

版权

本文通过一个简单的记事本应用的构建过程，介绍了如何运用vue-cil和vuex进行状态管理。应用包括添加、编辑笔记等功能，深化了对vuex的理解。项目结构、关键代码及组件设计均有详细说明。

摘要由CSDN通过智能技术生成

学习vuex文档稍微了解了一下vuex，这个练习用于应用一下vuex。构建一个简单的单页笔记本应用，加深对vuex的理解。

Demo：https://ccessl.github.io/test/

实现效果：

安装npm和vue-cli这里就略过了，首先创建一个webpack模板项目

在命令提示符终端输入： npm init webpack

之后输入项目名称、描述等信息。因为没有用到vue-rounter 、ESLint、unit test都选择No就可以了，npm inatall自动运行安装项目依赖。

安装vuex,在命令提示符终端输入：npm install vuex --save

完成之后可以看到package.json中的dependencies依赖中增加了vuex，这里的版本为3.0.1

为了方便编辑，将文件夹移动到WebStrom中打开。新建一个store文件夹，并添加一个index.js文件。项目结构如下：

strore/index.js中的内容如下：

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

var listArr = [{
  title: 'window.history',
  edit: '2018-6-15 12:05:00',
  text: '（1）back()、go()、forward()可以改变网站的浏览器url的状态，同时如果调用这几个方法的话会触发事件popState，子啊浏览器中点击相关的按钮也会触发该事件window.history.length可以返回历史浏览列表中的url的个数。' +
  '（2）H5中新增的方法：' +
  'pushState(state,title,url)，将某个浏览的url保存到history中，但是不会触发事件popstate' +
  'replaceState(state,title,url)，将指定的url替换当前的url但是也不会触发popstate事件',
  mark: true
},
  {
    title: '示例',
    edit: '2018-6-17 10:35:12',
    text: '这里也有一些内容在这里呢！',
    mark: false
  }
];

export default new Vuex.Store({
  state: {
    listArr: listArr,
    nowEdit: listArr[0]
  },
  mutations: {
    //添加一个笔记
    add_file: function (state) {
      var temp = {
        title: '这里是标题',
        edit: '',
        text: '',
        mark: false
      };
      state.listArr.push(temp);
      state.nowEdit = temp;
    },
    //设置为acti