vue vuex 大型項目demo示例

1、vuex 動態模塊配置

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

或者組件注冊：

 

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

在mutations中可以將type設置為常量

 

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

 

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

 

 

3、嚴格模式

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

在嚴格模式下，無論何時發生了狀態變更且不是由 mutation 函數引起的，將會拋出錯誤。這能保證所有的狀態變更都能被調試工具跟蹤到。