vuex & redux
https://github.com/xgqfrms/VAIO/
https://scrimba.com/playlist/pnyzgAP
vuex
data flow
Structure and manage Vuex store with Modules
https://scrimba.com/p/pnyzgAP/cqKK4psq
https://markus.oberlehner.net/blog/how-to-structure-a-complex-vuex-store/
https://vuex.vuejs.org/guide/structure.html
https://vuex.vuejs.org/guide/modules.html
action & mapActions
https://vuex.vuejs.org/zh/guide/actions.html
alias name bug
-
将
this.increment()映射为this.$store.dispatch('increment') -
将
this.add()映射为this.$store.dispatch('increment')
import { mapActions } from 'vuex'
export default {
// ...
methods: {
...mapActions([
'increment', // 将 `this.increment()` 映射为 `this.$store.dispatch('increment')`
// `mapActions` 也支持载荷：
'incrementBy' // 将 `this.incrementBy(amount)` 映射为 `this.$store.dispatch('incrementBy', amount)`
]),
...mapActions({
add: 'increment' // 将 `this.add()` 映射为 `this.$store.dispatch('increment')`
})
}
}
namespace & path
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
const moduleA = {
namespaced: true,
state: {
count: 3
},
mutations: {
increment (state) {
state.count++
}
},
getters: {
doubleCount (state) {
return state.count * 2
}
},
actions: {
incrementIfOdd({state, commit}) {
if (state.count % 2 === 1) {
commit('increment');
}
}
}
}
const moduleB = {
state: {
count: 8
},
mutations: {
},
getters: {
},
actions: {
}
}
const store = new Vuex.Store({
modules: {
a: moduleA,
b: moduleB
},
state: {
count: 2
},
mutations: {
},
getters: {
},
actions: {
}
})
new Vue({
el: '#app',
store,
data: {
},
computed: {
}
});
console.log(store.state.a.count);
// console.log(store.state.b.count);
store.commit('a/increment');
console.log(store.state.a.count);
bugs & warns
https://vuejs.org/v2/guide/deployment.html
index.pack.js:736 [Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.
redux
https://redux.js.org/basics/data-flow
data flow
https://github.com/reduxjs/redux/issues/653
https://redux.js.org/basics/usage-with-react
https://redux.js.org/advanced/usage-with-react-router
https://redux.js.org/basics/basic-tutorial
https://redux.js.org/advanced/advanced-tutorial
SSR
服务端渲染
https://cn.vuejs.org/v2/guide/ssr.html