用vue-cli 与vuex一步一步搭建一个笔记应用(四)
讲了这么久,终于讲到重点了。将vuex用进我们的笔记应用项目首先建立一个文件夹用来放vuex吧按照那篇博文的写法,一个store.js 和 actions.js再想一下一个笔记应用需要哪些数据呢?1、笔记数据2、以及当前活动的笔记数据(即正在编辑的笔记)好像就只有这个数据了吧。对于笔记也就只有增删查改,以及设置当前编辑笔记和喜欢的笔记了这里是store.js的代码,我现在尽量代码风格都偏
讲了这么久,终于讲到重点了。将vuex用进我们的笔记应用项目
首先建立一个文件夹用来放vuex吧
按照那篇博文的写法,一个store.js 和 actions.js
再想一下一个笔记应用需要哪些数据呢?
1、笔记数据
2、以及当前活动的笔记数据(即正在编辑的笔记)
好像就只有这个数据了吧。
对于笔记也就只有增删查改,以及设置当前编辑笔记和喜欢的笔记了
这里是store.js的代码,我现在尽量代码风格都偏向ES2015风格了,以前其实很排斥写ES6,觉得现在用的JS挺好的啊,但是一种新技术的出现并不是为了给我们增加工作量,而是为了使得我们的开发更加便捷。因此刻意去学习使用ES2015,反而会减轻我们的开发工作量呢。
Vue.use(Vuex)
/*定义数据*/
const state = {
notes: [],
activeNote: {}
}
/*定义方法*/
const mutations = {
// 添加笔记
ADD_NOTE: state => {
const newNote = {
text: 'new note',
favorite: false,
header: 'newNote'
}
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];
},
//标记favorite
TOGGLE_FAVORTE: (state) => {
state.notes.favorite = !state.activeNote.favorite;
},
//设置活动笔记
SET_ACTIVE_NOTE: (state, note) => {
state.activeNote = note;
}
}
const store = new Vuex.Store({
state,
mutations
});
这里的项目没有用到getters,写了actions数据分发;
事件分发这里我不是特别的懂:
有dispatch,有commit
const actions = {
editNote({
dispatch
}, e) {
dispatch('EDIT_NOTE', e.target.value)
},
}
commit:
actions: {
increment ({ commit }) {
commit('increment')
}
}
这里的说明是 Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象,因此你可以调用 context.commit 提交一个 mutation,大概是我对于析构函数了解不清楚吧
文档说Action 通过 store.dispatch 方法触发
于是看了一下这篇文章,原来是vue2.x的变化
http://kingsongao.com/blog/2016/07/24/vuex-v2-%E4%B8%AD%E7%9A%84%E4%B8%80%E4%BA%9B%E5%8F%98%E5%8C%96/
所以说如果写在store里面,就用commit,写在外面就用dispatch(仅仅是自己的猜测)
首先就是针对命名的语义化,主要集中在两个名词上:commit 与 dispatch。
之前的 store.dispatch 变成了现在的 store.commit,但是 store.dispatch 依然可用,但仅仅用来触发某些 action。
这里就懂了actions和getters其实是一样的道理。
getters可以这样获取
computed:{
count(){
return this.$store.state.count
},
notes(){
return this.$store.state.notes
}
},
然后actions也可以这么写
methods: {
increment () {
this.$store.commit('increment')
},
decrement () {
this.$store.commit('decrement')
}
}
另一种写法就是先引入mapActions和mapGetters;
import {mapActions,mapGetters} from 'vuex'
在store里面,store.js
const actions = {
updateActiveNote: ({
commit
}, payload) => {
commit('SET_ACTIVE_NOTE', payload)
},
addNote: ({
commit
}) => {
commit('ADD_NOTE')
},
deleteNote: ({
commit
}, note) => {
commit('DELETE_NOTE', note)
},
toggleFavorite: ({
commit
}) => {
commit('TOGGLE_FAVORTE')
}
}
因此函数的引入,app.vue
methods:mapActions(['updateActiveNote'])
不过这里我遇到了一个问题就是我不知道怎么传参了。
然后我还是采用的mutation传参:
this.$store.commit('SET_ACTIVE_NOTE', note)
然后基本上完成了所有的功能了,具体代码见我的git
https://github.com/daisyHawen/vuex-notes
接着我又要开始学习es6了,看一下解构赋值究竟是怎么回事
更多推荐



所有评论(0)