关于vuex:记录vuex - 乐趣区

首先创立对应的 store 目录和对应的入口 index.js

import Vue from 'vue'
import Vuex from 'vuex'
import products from './modules/products'
import cart from './modules/cart'

Vue.use(Vuex)

export default new Vuex.Store({
  strict: process.env.NODE_ENV !== 'production',
  state: {
    count: 0,
    msg: 'Hello Vuex'
  },
  getters: {reverseMsg (state) {return state.msg.split('').reverse().join('')
    }
  },
  mutations: {increate (state, payload) {state.count += payload}
  },
  actions: {increateAsync (context, payload) {setTimeout(() => {context.commit('increate', payload)
      }, 2000)
    }
  },
  modules: {
    products,
    cart
  }
})

首先注册 vuex 的插件
开发阶段开启 strict 严格模式
配置初始的 state
配置对应的 getters
配置对应的 mutations 无副作用的函数更新
配置 actions 在此做异步解决
最初配置模块
模块中配置：

const state = {}
const getters = {}
const mutations = {}
const actions = {}

export default {
  namespaced: true,
  state,
  getters,
  mutations,
  actions
}

配置模块命名空间 namespaced:true 导入 store 时的模块名

应用的时候

能够通过一些对应的 vuex 提供的办法把 store 中的对应属性和办法拿到组件中

vue 父子通信

或者就是自定义组件的 v-model

非父子组件：Event Bus
咱们能够应用一个非常简单的 Event Bus 来解决这个问题：

还有一种须要留神的，内部 props 转换为外部 state

  name: 'ArticleMeta',
  props: {
    article: {
      type: Object,
      required: true
    },
    user: {type: Object}
  },
  data () {
    return {currentArticle: this.article, isDelete: false}
  },

这里记录一下 vuex 的应用和 vuex 的繁难实现