vue vuex 大型项目demo示例

时间：2021-09-24 00:47:59

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 函数引起的，将会抛出错误。这能保证所有的状态变更都能被调试工具跟踪到。

标签：

相关文章