使用vuex保存收藏的文章信息
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。
Vuex 使用单一状态树——是的，用一个对象就包含了全部的应用层级状态，所以就在state.js使用一个对象作为唯一的数据源
|-- src
|-- store
|-- actions.js
|-- getters.js
|-- index.js
|-- mutations.js
|-- mutations-type.js
|-- state.js
// mutation-types.js
export const SOME_MUTATION = 'SOME_MUTATION'
// store.js
import Vuex from 'vuex'
import { SOME_MUTATION } from './mutation-types'
const store = new Vuex.Store({
state: { ... },
mutations: {
// 我们可以使用 ES2015 风格的计算属性命名功能来使用一个常量作为函数名
[SOME_MUTATION] (state) {
// mutate state
}
}
})vuex提供了辅助函数，为了一个组件获取多个状态，所以在获取状态的时候，都是使用vuex提供的辅助函数 比如mapGetters, mapActions, mapMutations
代码中使用了对象展开运算符
computed: {
localComputed () { /* ... */ },
// 使用对象展开运算符将此对象混入到外部对象中
...mapGetters({
// ...
})
}使用json-server，启动一个REST的api
$ npm install -g json-server
开始Json Server
$ json-server --watch db.json
数据源里面的属性有收藏的文章列表和文章对象
// state.js
import { loadCollectArticles } from 'common/js/cache'
const state = {
articles: loadCollectArticles(),
article: {}
}
export default state其中，收藏的文章列表保存在localStorage里面
// cache.js
import storage from 'good-storage'
const COLLECT_KEY = '__collect__'
export function loadCollectArticles() {
return storage.get(COLLECT_KEY, [])
}这是vuex的Store的相关配置，其中的strict是严格模式
在严格模式下，无论何时发生了状态变更且不是由 mutation 函数引起的，将会抛出错误。这能保证所有的状态变更都能被调试工具跟踪到。
而插件createLogger是日志插件用于调试，主要是mutaions的操作调试
// index.js
// 判断当前环境是开发环境还是生产环境
...
import createLogger from 'vuex/dist/logger'
const debug = process.env.NODE_ENV !== 'production'
export default new Vuex.Store({
state,
getters,
actions,
mutations,
strict: debug,
plugins: debug ? [createLogger()] : []
})使用mapGetters来获取state派生出来的状态，来获取收藏列表的文章
// HelloWrold.vue
...
import { mapGetters, mapActions, mapMutations } from 'vuex'
...
computed: {
...mapGetters([
'articles'
])
}因为保存收藏的文章的进度，我们不知道，所以不用MapMutations（同步），用mapActions来保存收藏文章的进度
// HelloWorld.vue
...
methods: {
...mapActions([
'saveArticle'
])
}
...
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent