1、vuex 動(dòng)態(tài)模塊配置

import Vue from 'vue' import Vuex from 'vuex' import store from '@/store';// 使用Vuex插件，即使插件被調(diào)用多次，插件也只會(huì)安裝一次 Vue.use(Vuex);// state存儲(chǔ)數(shù)據(jù)的狀態(tài) const state = {// 數(shù)據(jù)狀態(tài)name: 'mfg' }// getters獲取數(shù)據(jù)狀態(tài) const getters = {// 可以使用store.getters.myName獲取數(shù)據(jù)myName: state => {return state.name} }// mutations更改數(shù)據(jù)狀態(tài)的唯一方法 const mutations = {// 每個(gè)mutations都有一個(gè)事件類型type和回調(diào)函數(shù)。下面代碼type為editName，回調(diào)函數(shù)即完成數(shù)據(jù)更改。// agr為參數(shù) editName(state, arg) {state.name = arg;} }// actions提交的是mutation，處理的異步操作 const actions = {// 傳遞的參數(shù)為arg editNameAction({ commit, state }, arg) {commit('editName', arg)} }// registerModule，在 store 創(chuàng)建之后，注冊(cè)模塊 // 模塊動(dòng)態(tài)注冊(cè)功能可以讓其他vue插件使用注冊(cè)好的新模塊 store.registerModule('myNameSpace', {// 命名空間，模塊具有更高的封裝度和復(fù)用性namespaced: true,state,mutations,getters,actions })

或者組件注冊(cè)：

?

<script> import storeIndex from '../protect/store' import store from '@/store'export default {name: 'intelligence',beforeMount() {//組件注冊(cè)store的命名空間store.registerModule('intelligence', storeIndex)},destroyed() {//組件銷毀store的命名空間store.unregisterModule('intelligence')} } </script>/protect/store文件： export default {namespaced: true,modules: {common,workflow,configfile,sysdetail,unitdetail} }

?

?

?

2、vue單文件demo

<template><div><!-- 使用mapState獲取數(shù)據(jù)狀態(tài) --><p>{{name}}</p><!-- 使用mapGetters獲取數(shù)據(jù)狀態(tài) --><p>{{myName}}</p><!-- 使用mapMutations更改數(shù)據(jù)狀態(tài) --><el-button @click="edit('abc')">修改名字</el-button><!-- 使用mapActions更改數(shù)據(jù)狀態(tài) --><el-button @click="edit2('def')">修改名字2</el-button></div> </template> <script>import sti from 'commons/sti'; import './store';// 輔助函數(shù)mapMutations, mapActions, mapGetters, mapState import { mapMutations, mapActions, mapGetters, mapState } from 'vuex';export default sti.page({computed: {// 使用對(duì)象展開運(yùn)算符將此對(duì)象混入到外部對(duì)象中// 第一個(gè)參數(shù)為模塊上下文myNameSpace ...mapState('myNameSpace', {name: state => state.name}),// 使用對(duì)象展開運(yùn)算符將此對(duì)象混入到外部對(duì)象中// 第一個(gè)參數(shù)為模塊上下文myNameSpace ...mapGetters('myNameSpace', ['myName'])},data() {return {}},methods: {// 第一個(gè)參數(shù)為模塊上下文myNameSpace ...mapMutations('myNameSpace', ['editName']),// 第一個(gè)參數(shù)為模塊上下文myNameSpace ...mapActions('myNameSpace', ['editNameAction']),// 也可以這樣寫// ...mapActions(['myNameSpace/editNameAction']), edit(arg) {// 更新數(shù)據(jù)狀態(tài)this.editName(arg);},edit2(arg) {// 更新數(shù)據(jù)狀態(tài)this.editNameAction(arg);}},mounted() {} }); </script>

在mutations中可以將type設(shè)置為常量

?

const mutations = {[types.THEME_UPDATE](state, theme) {state.appTheme = theme} }

?

const actions = {updateTheme: ({commit}, theme) => {commit(types.THEME_UPDATE, theme)} }

?

?

3、嚴(yán)格模式

const store = new Vuex.Store({// ...strict: process.env.NODE_ENV !== 'production' })

在嚴(yán)格模式下，無論何時(shí)發(fā)生了狀態(tài)變更且不是由 mutation 函數(shù)引起的，將會(huì)拋出錯(cuò)誤。這能保證所有的狀態(tài)變更都能被調(diào)試工具跟蹤到。

更多專業(yè)前端知識(shí)，請(qǐng)上 【猿2048】www.mk2048.com

總結(jié)

以上是生活随笔為你收集整理的vue vuex 大型项目demo示例的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。