快捷導(dǎo)航

vuex的使用和簡易實(shí)現(xiàn)

更新時(shí)間：2021年01月07日 10:42:21 作者：Charon

這篇文章主要介紹了vuex的使用和簡易實(shí)現(xiàn)，幫助大家更好的理解和使用vuex，感興趣的朋友可以了解下

這里記錄一下vuex的使用和vuex的簡易實(shí)現(xiàn)

首先創(chuàng)建對應(yīng)的store目錄和對應(yīng)的入口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的插件
開發(fā)階段開啟strict嚴(yán)格模式
配置初始的state
配置對應(yīng)的getters
配置對應(yīng)的mutations 無副作用的函數(shù)更新
配置actions在此做異步處理
最后配置模塊
模塊中配置：

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

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

配置模塊命名空間namespaced:true 導(dǎo)入store時(shí)的模塊名

使用的時(shí)候

可以通過一些對應(yīng)的vuex提供的方法把store中的對應(yīng)屬性和方法拿到組件中

vue父子通信

或者就是自定義組件的 v-model

非父子組件：Event Bus
我們可以使用一個(gè)非常簡單的 Event Bus 來解決這個(gè)問題：

還有一種需要注意的，外部props轉(zhuǎn)換為內(nèi)部state

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

以上就是vuex的使用和簡易實(shí)現(xiàn)的詳細(xì)內(nèi)容，更多關(guān)于vuex的使用和實(shí)現(xiàn)的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章:

相關(guān)文章

Vite結(jié)合Vue刪除指定環(huán)境的console.log問題
這篇文章主要介紹了Vite結(jié)合Vue刪除指定環(huán)境的console.log問題，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-03-03
vue中的過濾器實(shí)例代碼詳解
這篇文章主要介紹了vue中的過濾器，本文通過文字實(shí)例代碼相結(jié)合的形式給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2019-06-06
vue router路由嵌套不顯示問題的解決方法
這篇文章主要為大家詳細(xì)介紹了vue router路由嵌套不顯示的問題，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下vue-router 路由嵌套不顯示問題
2017-06-06
解決Vue-cli無法編譯es6的問題
這篇文章主要介紹了解決Vue-cli無法編譯es6的問題，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-10-10
詳解vue-cli3多頁應(yīng)用改造
這篇文章主要介紹了詳解vue-cli3多頁應(yīng)用改造，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2019-06-06
VUE寫一個(gè)簡單的表格實(shí)例
在本篇文章里小編給大家整理的是關(guān)于VUE中表格的寫法實(shí)例以及相關(guān)知識點(diǎn)內(nèi)容，需要的朋友們可以參考下。
2019-08-08
vue表單驗(yàn)證rules及validator驗(yàn)證器的使用方法實(shí)例
在vue開發(fā)中,難免遇到各種表單校驗(yàn),下面這篇文章主要給大家介紹了關(guān)于vue表單驗(yàn)證rules及validator驗(yàn)證器使用的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2022-07-07
Vue from-validate 表單驗(yàn)證的示例代碼
本篇文章主要介紹了Vue from-validate 表單驗(yàn)證的示例代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-09-09
Vue 樣式切換及三元判斷樣式關(guān)聯(lián)操作
這篇文章主要介紹了Vue 樣式切換及三元判斷樣式關(guān)聯(lián)操作，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-08-08
vue3使用vue-router及路由權(quán)限攔截方式
這篇文章主要介紹了vue3使用vue-router及路由權(quán)限攔截方式，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-04-04