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

学习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;
    },
    //设置为active
    set_active (state, note)
    {
      state.nowEdit = note;
    },
    //设置笔记内容
    set_text(state, text)
    {
      state.nowEdit.text = text;
    },
    //设置编辑时间
    set_time(state, time)
    {
      state.nowEdit.edit = time;
    },
    //删除一个笔记
    delete_file: function (state, item) {
      for (var i = 0, len = state.listArr.length; i < len; i++) {
        if (state.listArr[i] == item) {
          if (state.listArr[i] == state.nowEdit) {
            state.nowEdit = state.listArr[0];
          }
          state.listArr.splice(i, 1);
          break;
        }

      }
    },
    //标记一个笔记
    mark_file: function (state, item) {
      item.mark = !item.mark;

    },
    //设置笔记标题
    set_title: function (state, text) {
      state.nowEdit.title = text;

    }
  }
})

里面的状态对象会包含所有应用级别的状态，也就是各个组件需要共享的状态。其中state中的listArr数组用于记录每一篇笔记。一个笔记定义了四个属性：

1. title：标题
2. edit：最后编辑的时间
3. text：文本内容
4. mark：是否标记

State中的nowEdit数组用于记录正在编辑的笔记，设置nowEdit:listArr[0]表示默认打开第一篇笔记。我们知道更改 Vuex 的 store 中的状态的唯一方法是提交 mutation，根据需要在mutations中定义了一些方法用于更改state中的状态。

 

src文件夹下面的main.js是应用的入口文件，里面有根实例，我们要把 Vuex store 加到到这个根实例里面，进而注入到它所有的子组件里面。

main.js:

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import store from '../store/index'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  store,
  el: '#app',
  components: { App },
  template: ''
})

用vue构建的模板很周到了，该有的基本文件都有了。因为要用到bootstrap中的glyphicon图标，在index.html的导入外部样式文件，其中main.css用于页面基本初始化布局。

index.html:

main.css ：（放在static/css文件夹下）

/**
 * Created by CC on 2018/7/17.
 */
html, #app {
  height: 100%;
  overflow: hidden;
}

body {
  margin: 0;
  padding: 0;
  border: 0;
  height: 100%;
  max-height: 100%;
  position: relative;
}

这里将页面划分成了三个组件HeadPart,EditTool,LeftTool。在scr/components目录下新建这三个组件，组件在页面中对应的位置如下：

在根组件App.vue中import这三个组件，并放在components中。

App.vue:

 

HeadPart.vue很简单，头部提供了一个+的标价。在点击的时候使用store.commit 方法触发一个类型为 add_file的 mutation 。进而更改Vuex.Store中的state.listArr,Vuex.Store中的状态改变，用到这些状态的子组件也会同步更新，非常方便。

HeadPart.vue

LeftTool组件用于展示所有笔记的列表，使用v-for指令基于源数据重复渲染元素。可以在computed计算属性中返回store中的状态。注意text的内容过多的话LeftTool组件不会显示笔记的所有信息，使用filters过滤器，返回过滤器处理的数据结果。当text长度大于50的话就截取前50的字符加上省略号返回。

LeftTool.vue:

最后是EditTool组件，用于展示和编辑标题和笔记内容。使用v-on指令监听DOM事件。在触发input事件时，注意同时要更新最后编辑时间和文本内容。</p> <p>Edit.vue</p> <pre class="has"><code class="language-javascript"><template> <div id="ccContainer"> <div class="mytitle"> <input type="text" class="ccTitle" :value="activeNoteText.title" @input="editTitle"/> </div> <textarea id="ccEdit" :value="activeNoteText.text" @input="editNote">

 

 

最后在命令提示符终端输入：npm run dev

启动项目