Vuex 进阶，创建一个笔记本项目

最新推荐文章于 2022-11-02 14:42:29 发布
最新推荐文章于 2022-11-02 14:42:29 发布
阅读量1.7k 收藏 3
点赞数
分类专栏： 【Vuex点滴知识 】

教程开始

http://www.jianshu.com/p/dc9a79f6ceb7

让我们通过这个例子，来理解 Vuex2.0 给我们带来的便利，之前在研究 Vuex2.0 的时候也是踩了一些坑，所以写了本文，也是为了减少后面出现更多的学习者避免踩坑。

我们会通过这个例子解释相应的概念，以及 Vuex 所要解决的问题：如何管理一个包含许多组件的大型应用。我们假定这个例子使用以下四个组件：最外层(App.vue),左边(toolbar),中间(noteslist),右边(editor)


Paste_Image.png

App.vue 
app 组件，它包含了另外三个子组件：

  • toolbar
  • noteslist
  • editor
<template>
  <div id="app">
    <toolbar></toolbar>
    <notes-list></notes-list>
    <editor></editor>
  </div>
</template>

<script>
import Toolbar from './components/toolbar'
import NotesList from './components/noteslist'
import Editor from './components/editor'

export default {
  components: {
    Toolbar, NotesList, Editor
  }
}
</script>
<style type="text/css">
@import url(https://fonts.googleapis.com/css?family=Raleway:400,300);
html, #app {
  height: 100%;
}
body {
  margin: 0;
  padding: 0;
  border: 0;
  height: 100%;
  max-height: 100%;
  position: relative;
}
#toolbar {
  float: left;
  width: 80px;
  height: 100%;
  background-color: #30414D;
  color: #767676;
  padding: 35px 25px 25px 25px;
}
#notes-list {
  float: left;
  width: 300px;
  height: 100%;
  background-color: #F5F5F5;
  font-family: 'Raleway', sans-serif;
  font-weight: 400;
}
#list-header {
  padding: 5px 25px 25px 25px;
}
#list-header h2 {
  font-weight: 300;
  text-transform: uppercase;
  text-align: center;
  font-size: 22px;
  padding-bottom: 8px;
}
#notes-list .container {
  height: calc(100% - 137px);
  max-height: calc(100% - 137px);
  overflow: auto;
  width: 100%;
  padding: 0;
}
#notes-list .container .list-group-item {
  border: 0;
  border-radius: 0;
}
.list-group-item-heading {
  font-weight: 300;
  font-size: 15px;
}
#note-editor {
  height: 100%;
  margin-left: 380px;
}
#note-editor textarea {
  height: 100%;
  border: 0;
  border-radius: 0;
}
#toolbar i {
  font-size: 30px;
  margin-bottom: 35px;
  cursor: pointer;
  opacity: 0.8;
  transition: opacity 0.5s ease;
}
#toolbar i:hover {
  opacity: 1;
}
.starred {
  color: #F7AE4F;
}
</style>

component/toolbar.vue

<template>
  <div id="toolbar">
    <i class="glyphicon glyphicon-plus"></i>
    <i class="glyphicon glyphicon-star"></i>
    <i class="glyphicon glyphicon-remove"></i>
  </div>
</template>
<script>
export default {}
</script>

component/noteslist.vue

<template>
  <div id="notes-list">
    <div id="list-header">
      <h2>Notes | coligo</h2>
      <div class="btn-group btn-group-justified" role="group">
        <!-- All Notes button -->
        <div class="btn-group" role="group">
          <button type="button" class="btn btn-default">
            All Notes
          </button>
        </div>
        <!-- Favorites Button -->
        <div class="btn-group" role="group">
          <button type="button" class="btn btn-default">
            Favorites
          </button>
        </div>
      </div>
    </div>
    <!-- render notes in a list -->
    <div class="container">
      <div class="list-group">
        <a class="list-group-item" href="#">
          <h4 class="list-group-item-heading">
            标题列表
          </h4>
        </a>
      </div>
    </div>
  </div>
</template>
<script>
export default {}
</script>

component/editor.vue

<template>
  <div id="note-editor">
    <textarea class="form-control">
    </textarea>
  </div>
</template>

<script>
export default {}
</script>
第一步：加入 store

store 存储应用所需的数据。所有组件都从 store 中读取数据，在我们开始之前，先用 npm 安装 vuex

$ npm install --save vuex

建立一个新的文件，在根目录下创建 vuex/store.js

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

// 使用 vuex
Vue.use(Vuex)

// 创建一个对象来保存应用启动时的初始状态
const state = {
  // TODO 放置初始状态
}

// 创建一个对象存储一系列我们接下来要写的 mutation 函数
const mutations = {
    // TODO 放置我们的状态变更函数
}

// 整合初始状态和变更函数，我们就得到了我们所需的 store
// 至此，这个 store 就可以链接到我们的应用中
export default new Vuex.Store({
  state, mutations
})

我们需要将创建的 store 让整个项目发现，所以这个时候需要修改 main.js
修改 main.js，注入 store

import Vue from 'vue'

import App from './App'
import store from './vuex/store'

new Vue({
  template: '<App/>',
  store,
  components: { App }
}).$mount('#app')
第二步：创建 action

action 是一种专门用来被 component 调用的函数，action 函数能够通过分发相应的 mutation 函数，来触发对 store 的更新。action 也可以先从 HTTP 后端或 store 中读取其他数据之后再分发更新事件。

创建一个新文件 vuex/action.js，然后写入相关函数

// 新增笔记
export const addNote = ({ commit, state }) => {
  commit('ADD_NOTE')
}

// 修改笔记
export const editNote = ({ commit, state }, e) => {
  commit('EDIT_NOTE', e.target.value)
}

// 删除笔记
export const deleteNote = ({ commit, state }) => {
  commit('DELETE_NOTE')
}

// 更新当前选中笔记
export const updateActiveNote = ({ commit, state }, note) => {
  commit('SET_ACTIVE_NOTE', note)
}

// 选中模块按钮（All note、Favorites）
export const toggleFavorite = ({ commit, state }) => {
  commit('TOGGLE_FAVORITE')
}

回顾一下我们刚刚添加的内容背后所潜藏的一些有趣的点：

  1. 我们有了一个新对象 vuex.actions，包含着新的 action；
  2. 我们没有指定特定的 store，object，state 等等。Vuex 会自动把它们串联起来；
  3. 我们可以用 this.addNote () 在任何方法中调用此 action；
  4. 我们也可以通过 @click 参数调用它，与使用其他普通的 Vue 组件方法并无二致；
  5. 我们给 action 起名叫 addNote，但是在具体使用时，我们可以根据需要进行重新命名
第三步：创建 state 和 mutation

我们在 vuex/actions.js 文件里，添加了相关的 mutation ，但是我们还没有写它所对应的具体操作，现在就让我们来将这些方法暴露出来。

修改 vuex/store.js

import Vue from 'vue'
import Vuex from 'vuex'
import * as actions from './actions'
import * as getters from './getters'

// 使用 vuex
Vue.use(Vuex)

// 创建一个对象来保存应用启动时的初始状态
const state = {
  // TODO 放置初始状态
  count: 0,
  notes: [],
  activeNote: []
}

// 创建一个对象存储一系列我们接下来要写的 mutation 函数
const mutations = {
  // TODO 放置我们的状态变更函数
  increment (state, amount) {
    state.count = state.count + amount
  },
  decrement (state, amount) {
    state.count = state.count - amount
  },
  DECREMENT (state, amount) {
    state.count = state.count - amount
  },
  ADD_NOTE (state) {
    console.log(state)
    const newNote = {
      text: 'New Note',
      favorite: false
    }
    state.notes.push(newNote)
    state.activeNote = newNote
  },

  EDIT_NOTE (state, text) {
    state.activeNote.text = text
  },

  DELETE_NOTE (state) {
    state.notes.$remove(state.activeNote)
    state.activeNote = state.notes[0]
  },

  TOGGLE_FAVORITE (state) {
    state.activeNote.favorite = !state.activeNote.favorite
  },

  SET_ACTIVE_NOTE (state, note) {
    state.activeNote = note
  }
}

// 整合初始状态和变更函数，我们就得到了我们所需的 store
// 至此，这个 store 就可以链接到我们的应用中
export default new Vuex.Store({
  actions,
  getters,
  state,
  mutations
})
第四步： 创建 getter

在 store 中的数据，我们可以通过创建一个新的文件 getter 来统一获取方法，这样子不仅便于管理，有时候很多地方使用同一个方法，此时我们不需要修改一大堆页面，只需要修改 getter.js 中的方法实现就可以。

创建一个新文件 vuex/getter.js ，然后编写代码：

/**
 * 在 ES6 里你可以这样写
 * export const getCount = state => state.count
 */
export const notes = state => state.notes

export const activeNote = state => state.activeNote

export const activeNoteText = state => state.activeNote.text
第五步：在组件中获取数据，并且调用 action 方法

修改 vuex/toolbar.vue

<template>
  <div id="toolbar">
    <i @click="addNote" class="glyphicon glyphicon-plus"></i>
    <i @click="toggleFavorite"
      class="glyphicon glyphicon-star"
      :class="{starred: activeNote.favorite}"></i>
    <i @click="deleteNote" class="glyphicon glyphicon-remove"></i>
  </div>
</template>

<script>
import { mapGetters, mapActions } from 'vuex'

export default {
  computed: mapGetters({
    activeNote: 'activeNote'
  }),
  methods: mapActions([
    'addNote',
    'deleteNote',
    'toggleFavorite'
  ])
}
</script>

修改 vuex/noteslist.vue

<template>
  <div id="notes-list">

    <div id="list-header">
      <h2>Notes | coligo</h2>
      <div class="btn-group btn-group-justified" role="group">
        <!-- All Notes button -->
        <div class="btn-group" role="group">
          <button type="button" class="btn btn-default"
            @click="show = 'all'"
            :class="{active: show === 'all'}">
            All Notes
          </button>
        </div>
        <!-- Favorites Button -->
        <div class="btn-group" role="group">
          <button type="button" class="btn btn-default"
            @click="show = 'favorites'"
            :class="{active: show === 'favorites'}">
            Favorites
          </button>
        </div>
      </div>
    </div>
    <!-- render notes in a list -->
    <div class="container">
      <div class="list-group">
        <a v-for="note in filteredNotes"
          class="list-group-item" href="#"
          :class="{active: activeNote === note}"
          @click="updateActiveNote(note)">
          <h4 class="list-group-item-heading">
            {{note.text.trim().substring(0, 30)}}
          </h4>
        </a>
      </div>
    </div>

  </div>
</template>
<script>
import { mapGetters, mapActions } from 'vuex'

export default {
  data () {
    return {
      show: 'all'
    }
  },
  computed: {
    ...mapGetters([
      'notes', 'activeNote'
    ]),
    filteredNotes () {
      if (this.show === 'all') {
        return this.notes
      } else if (this.show === 'favorites') {
        return this.notes.filter(note => note.favorite)
      }
    }
  },
  methods: mapActions([
    'updateActiveNote'
  ])
}
</script>

修改 vuex/editor.vue

<template>
  <div id="note-editor">
    <textarea
      :value="activeNoteText"
      @input="editNote"
      class="form-control">
    </textarea>
  </div>
</template>

<script>
import { mapGetters, mapActions } from 'vuex'

export default {
  computed: {
    ...mapGetters([
      'activeNoteText'
    ])
  },
  methods: {
    ...mapActions([
      'editNote'
    ])
  }
}
</script>

这个时候，运行下你的程序，它可以正常工作了。

$ npm run dev

最后，总结下编写该案例时遇到的坑：

注意该案例使用的是 vue2.0 和 vuex2.0，安装插件时请不要装错；
如果使用 ES6，babel，那么请在 .babelrc 中 使用 stage-3 和 transform-object-rest-spread;

{
   "presets": ["es2015", "stage-3"],
   "plugins": ["transform-runtime", "transform-object-rest-spread"],
   "comments": false
}

附上 源码地址，欢迎大家来吐槽。githut

barnett_y
关注
专栏目录
创建 Vuex 项目（学习）
259的博客
01-06 998
创建 Vuex 项目（学习）
vuex进阶用法3.0 (mutation和action)
m0_58849641的博客
07-04 714
1.简单的mutation用法(同步)
Vuex——进阶
悦.L的博客
01-09 166
Vuex的基础篇主要介绍了Vuex的一些理论知识，和五个核心模块。那么我们继续去了解进阶内容，其实进阶内容比基础篇更加简单。 严格模式 什么是严格模式呢？Vuex规定了只能通过mutation函数改变状态，实际上getters和action都可以改变状态，只不过并不运行通过它们修改。所以严格模式就是在状态变更且不是由 mutation 函数引起的，将会抛出错误，这能保证所有的状态变更都能被调试工具跟踪到。 严格模式通过strict: true开启： const store = new Vuex.Stor.
认识vuex&vuex基础项目构建
m0_45899013的博客
06-17 152
认识vuex vue介绍 vue核心概念 构建项目 1.进入项目文件夹下，创建项目vuexdemo1 vue create vuexdemo1 2.进入项目，安装vuex cd vuexdemo1/ cnpm install vuex --save 3.在Hbuilder打开该项目目录，打开main.js，并编辑如下内容： 4.在App.vue中获取count 5.效果：对应main.js中的count：0 6.升级为计算属性computed 7.使用vuex来写，在main.js中定
vuex学习进阶
qq_40816649的博客
12-02 191
vuex在整个vue项目中去了非常重要的作用，它管理每个vue可以随时调用和改变的数据（例如用户名或用户头像） vuex实例里面有state，getters，mutations，action这四个对象。 创建vuex实例 新建store.js文件 引入相关的依赖并使用暴露出来 import Vue from 'vue' import Vuex from 'vuex' Vue.use(...
vuex进阶使用
天空影
06-22 504
接上文：vue-cli简单使用vuex 因为最近在对项目进行重构工作，所以就慢慢抽离了一些模块，最早做的就是重构了vuex模块，我发现我写的太垃圾了，我自己都看不下去了。所以在对vuex深入了解之后就动手把vuex模块无缝重构了，下面就是我在实验vuex的一些体会。 抽离层级 在上一篇文章中我们就发现我们的store文件就一个，这明显就不利于协助开发和维护，所以我们首先就是抽离store中各个模块...
vuex进阶知识点巩固
08-27
Vuex 是 Vue.js 的一个状态管理模式，用于管理应用中的共享状态。本文将深入探讨Vuex的进阶知识点，包括Getter、Actions以及Module模块化。 **一、Getter** Getter 是 Vuex 提供的一种方式，用于封装对状态(state)...
Vuex 进阶之模块化组织详解
11-29
在Vuex的实践中，随着项目的复杂度增加，将所有状态管理代码集中在一个store.js文件中会导致代码难以维护。为了解决这个问题，Vuex 提供了模块化（Modular）的组织方式，使得我们可以将不同业务领域的状态和操作分隔...
vuex进阶（模块化）
Tank_in_the_street的博客
09-15 3292
下面这篇是承接上一篇的内容的，如果没看过上一篇的内容，建议先翻一下上一篇的内容vuex入门。咋们这篇的功能和上一篇的一样，App.vue的内容没改，改的只是将store.js整个文件拆分成各个模块，下面是我拆分成各个js文件一览：         在这里，actions、getters和mutaions文件我就不解释了，下面解释的是index.js和types.js文件还有state状态
非常简单的一个vue2vuex的项目
08-10
非常简单的一个vue2 vuex的项目，整个流程一目了然，麻雀虽小，五脏俱全，适合作为入门练习
Vue总结（六）——Vuex进阶
qq_43776195的博客
03-09 253
文章目录Vue总结（六）——Vuex进阶前言1、getters1.2 基本使用1.3 示例2、mapState 与 mapGetters2.1 基本用法2.2 示例3、mapMutations 和 mapActions3.1 基本用法3.2 示例4、多组件共享数据5、模块化 + 命名空间（重要）5.1 基本使用5.2 示例5.2.1 代码抽离src/store/count.jssrc/store/person.jssrc/store/index.js5.2.2 页面编写Count.vuePerson.vue
vuex进阶用法
晴天有何特别
11-23 240
之前写的vuex只是小场景项目使用，当你的项目大了管理就不方便 modules里面的js其实是根据功能分类的 app.js 将通用数据通过vuex存储，包括后台请求，自定义的 import Vue from 'vue' const state = { commonEnums: { teachers: [], //老师 curriculums: [], /...
创建vue项目
最新发布
zeroone的博客
11-02 683
使用图形页面和命令行形式新建vue项目
Vuex理解与简单创建具有Vuex的项目
a124914的博客
02-05 171
Vuex 的理解与应用 说到Vuex 很多人会想 Vuex 和vue 有什么区别呢?? Vuex就是Vue.js应用程序开发一种状态管理模式 什么是Vuex? Vuex是单向数据流的典型应用(大家可以去查看一下单向数据流) Vuex分为 : 1. state 驱动应用的数据源(个人理解就是类似于全局变量的东西) 2. view 以声明似的方式将我们的数据映射到视图上 3. actions 用...
Vuex 入门到进阶
jyliyue的博客
07-06 307
先说一下Vuex到底是什么？ Vuex 是一个专门为 vue.js 应用程序开发的状态管理模式 这个状态我们可以理解为在 data 中的属性，需要共享给其他组件使用的部分 也就是说，我们需要共享的数据，可以使用 vuex 进行统一集中式的管理 喜欢看代码学习的的可直接下载下方 Demo https://gitee.com/jiangliyue/VuexDemo.git Vuex中的五...
vue项目创建
m0_51073424的博客
08-12 210
一、创建Vue项目与npm命令 1. 创建项目 # 先用全局方式安装 npm 的替代工具 cnpm，npm 默认从国外站点下载依赖的js库速度较慢，常常会下载不了；而 cnpm 会从 alibaba 的镜像站点下载依赖的js库速度快 npm install cnpm –g # 用全局方式安装 vue-cli npm install -g @vue/cli # 用全局方式安装 webpack npm install webpack -g ## 使用webpack模板创建项目:vue-qunar vue
Vuex——黑马头条项目（vuex体验版）
weixin_45998300的博客
04-03 1598
1.搭建项目 1.1通过vue-cli脚手架搭建项目：vue create toutiao (选择 vuex/eslint（standard）/pre-cssprocesser（less）) 1.2在main.js中引入样式：import ‘./style/index.css’ 1.3拷贝图片资源到assets目录下 1.4在App.vue中拷贝基本结构： <div id="app"> <ul class="catagtory"> <
vuex搭建过程以及项目结构
m0_45899013的博客
06-19 260
概念 vuex是专为vue.js应用程序开发的状态管理模式（提供了可共用的参数），主要采用的是集中式存储管理应用的所有组件状态（响应式） 主要应用场景 多个视图依赖于同一状态 来自不同视图的行为需要变更同一状态 vuex核心概念 state：数据仓库，驱动应用的数据源。 mutations：提供修改数据仓库的方法。（同步的） getters：提供获取仓库内容的方法。 actions：提供了异步操作，基于mutations来进行操作。 项目操作 1.如果要在项目中使用vuex的话，在当前目录下安装vuex：
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值