关于vuex:记录vuex

这里记录一下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
    }
  },

【腾讯云】轻量 2核2G4M,首年65元

阿里云限时活动-云数据库 RDS MySQL  1核2G配置 1.88/月 速抢

本文由乐趣区整理发布,转载请注明出处,谢谢。

您可能还喜欢...

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据