vuex & redux

vuex & redux

https://vuex.vuejs.org/

https://github.com/xgqfrms/VAIO/

https://scrimba.com/playlist/pnyzgAP

vuex

https://vuex.vuejs.org/zh/

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

1. 将 this.increment() 映射为 this.$store.dispatch('increment')

2. 将 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

https://ssr.vuejs.org/zh/

---