今天小編給大家分享一下Vuex Module狀態(tài)倉(cāng)庫(kù)分割如何使用的相關(guān)知識(shí)點(diǎn)，內(nèi)容詳細(xì)，邏輯清晰，相信大部分人都還太了解這方面的知識(shí)，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來(lái)了解一下吧。

創(chuàng)新互聯(lián)公司是一家專業(yè)從事網(wǎng)站建設(shè)、成都做網(wǎng)站的網(wǎng)絡(luò)公司。作為專業(yè)網(wǎng)站建設(shè)公司,創(chuàng)新互聯(lián)公司依托的技術(shù)實(shí)力、以及多年的網(wǎng)站運(yùn)營(yíng)經(jīng)驗(yàn),為您提供專業(yè)的成都網(wǎng)站建設(shè)、網(wǎng)絡(luò)營(yíng)銷推廣及網(wǎng)站設(shè)計(jì)開(kāi)發(fā)服務(wù)！

vuex構(gòu)成

vuex主要包含以下五個(gè)部分:

• State // 存儲(chǔ)變量、數(shù)據(jù)

• Getter // 類似計(jì)算屬性

• Mutation // 唯一修改state的方法

• Action // 異步調(diào)用Mutation

• Module // 將store模塊化

vuex的modules使用

創(chuàng)建目錄

在此示例中，我創(chuàng)建了兩個(gè)store文件，分別是 profile.js和custom.js，一個(gè)根文件index.js

custom.js

const customs = {
    namespaced: true, // 創(chuàng)建命名空間
    state: { // 存儲(chǔ)變量
        showAlert: false
    },
    mutations: { // 定義修改state方法
        CHANGESHOW: (state, params) => {
            state.showAlert = !state.showAlert        }
    },
    actions: { // 異步調(diào)用mutations
        setShow: ({ commit }) => {
            commit('CHANGESHOW')
        }
    },
    getters: { // 將數(shù)據(jù)過(guò)濾輸出
        bodyShow: state => state.showAlert    }}export default customs

profile.js

const profile = {
  namespaced: true,
  state: {
    name: 'common name',
    age: 18,
    bool: false
  },
  mutations: {
    CHANGEMSG: (state, params) => {
      state.name = params    },
    CHANGEAGE: (state, params) => {
      state.name = params    },
    CHANGEBOOL: (state) => {
      state.bool = !state.bool    }
  },
  actions: {
    setName: ({ commit }) => {
      commit('CHANGEMSG', 'Vuex common name')
    },
    setAge: ({ commit }) => {
      commit('CHANGEAGE', 81)
    },
    setBool: ({ commit }) => {
      commit('CHANGEBOOL')
    }
  },
  getters: {
    vuexName: state => state.name,
    vuexAge: state => state.age,
    vuexBool: state => state.bool  }}export default common

index.js

import Vue from 'vue'
import Vuex from 'vuex'

// 引入子store
import profile from './modules/profile'
import customs from './modules/customs'

// Vue.use(Vuex)
const store = new Vuex.Store({
  modules: {
    profile,
    customs
  }
})

export default store // 導(dǎo)出store，以便于后續(xù)使用

在需要使用的.vue文件里進(jìn)行使用。方法如下

index.vue

<template>
	<div>
	  name: <h6>{{vuexName}}</h6> <button @click='setName'>chenge name</button>
      age: <h6>{{vuexAge}}</h6> <button @click='setAge'>chenge age</button>
      bool: <h6>{{vuexBool}}</h6> <button @click='setBool'>chenge bool</button>
      <br/>
      
      <span @click='setShow' style='display:inline-block;width:200px;height:30px;border:1px solid #999;border-radius:5px;text-align:center;line-height:30px;cursor: pointer;'>click me ,change showAlert</span>
      <em>{{bodyShow}}</em>
	</div>
</template>
<script>
import { mapActions, mapGetters } from 'vuex'
export default {
computed: {
    ...mapGetters('profile', ['vuexName', 'vuexAge', 'vuexBool']),
    ...mapGetters('customs', ['bodyShow'])
  },
methods: {
    ...mapActions('customs', ['setShow']),
    ...mapActions('profile', ['setName', 'setAge', 'setBool']),
}
</script>
<style>

</style>

app.js

import Vue from 'vue';
import VueRouter from 'vue-router';
// style
import './../../sass/app.scss';

// Components
import Main from './Main.vue';
import routes from './routes';
// store
import store from './store';  // 將store掛載到Vue

Vue.use(VueRouter);

const router = new VueRouter({
  routes,
  saveScrollPosition: true,
});

new Vue({ router, store, ...Main }).$mount('#app');

初始效果圖 ??

點(diǎn)擊按鈕之后效果圖 ??

以上就是“Vuex Module狀態(tài)倉(cāng)庫(kù)分割如何使用”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會(huì)為大家更新不同的知識(shí)，如果還想學(xué)習(xí)更多的知識(shí)，請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

網(wǎng)頁(yè)標(biāo)題：VuexModule狀態(tài)倉(cāng)庫(kù)分割如何使用
標(biāo)題來(lái)源：http://jinyejixie.com/article4/ghhjie.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供商城網(wǎng)站、軟件開(kāi)發(fā)、網(wǎng)站維護(hù)、自適應(yīng)網(wǎng)站、小程序開(kāi)發(fā)、網(wǎng)站營(yíng)銷

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)