不爱吃菜的蔡菜
不爱吃菜的蔡菜

Vue | vuex【理解 vuex + vuex开发者工具的使用 + vuex的基本使用和API + 四个map方法的使用+多组件共享数据 +模块化+命名空间 】

文章目录

  • 理解 vuex
    • vuex 简介
    • 什么时候使用 Vuex
    • 求和案例（纯vue版）
    • Vuex工作原理图
    • 搭建vuex环境
    • 求和案例(vuex版)
  • vuex 的 API
    • state
    • actions
    • mutations
  • vuex开发者工具的使用
  • vuex的基本使用
  • getters配置项
  • 四个map方法的使用
    • 计算属性优化 mapState ， mapGetters
    • 方法优化 mapActions，mapMutations
  • 多组件共享数据
  • 模块化+命名空间

理解 vuex

vuex 简介

  1. 概念：专门在 Vue 中实现集中式状态（数据）管理的一个Vue 插件，对vue应用中多个组件的共享状态进行集中式的管理（读/写），也是一种组件间通信的方式，且适用于任意组件间通信。
  2. Github 地址:： https://github.com/vuejs/vuex

什么时候使用 Vuex

  1. 多个组件依赖于同一状态（数据）
  2. 来自不同组件的行为 需要变更同一状态
    Vue | vuex【理解 vuex + vuex开发者工具的使用 + vuex的基本使用和API + 四个map方法的使用+多组件共享数据 +模块化+命名空间 】_第1张图片

Vue | vuex【理解 vuex + vuex开发者工具的使用 + vuex的基本使用和API + 四个map方法的使用+多组件共享数据 +模块化+命名空间 】_第2张图片

求和案例（纯vue版）

Vue | vuex【理解 vuex + vuex开发者工具的使用 + vuex的基本使用和API + 四个map方法的使用+多组件共享数据 +模块化+命名空间 】_第3张图片
Count.vue 代码

<template>
  <div>
    <h1>当前求和为：{{ sum }}</h1>
    <!-- 获取用户的选择为n -->
    <select v-model.number="n">
      <!-- 将value里的内容强制转换成数值型 -->
      <option value="1">1</option> 
      <option value="2">2</option>
      <option value="3">3</option>
    </select>
    <button @click="increment">+</button>
    <button @click="decrement">-</button>
    <button @click="incrementOdd">当前求和为奇数再加</button>
    <button @click="incrementWait">等一等再加</button>
  </div>
</template>

<script>
export default {
  name: "Count",
  data() {
    return {
      n: 1, // 用户选择的数字
      sum: 0, // 当前的和
    };
  },
  methods: {
    increment() {
      this.sum += this.n;
    },
    decrement() {
      this.sum -= this.n;
    },
    incrementOdd() {
      if(this.sum % 2 ){ // this.sum % 2 == 0的话就是false，就进不来了
        this.sum += this.n;
      } 
    },
    incrementWait() {
      setTimeout(() => {
        this.sum += this.n;
      }, 500);
    },
  },
};
</script>

<style>
button {
  margin-left: 5px;
}
</style>

Vuex工作原理图

Vue | vuex【理解 vuex + vuex开发者工具的使用 + vuex的基本使用和API + 四个map方法的使用+多组件共享数据 +模块化+命名空间 】_第4张图片

搭建vuex环境

注意：
vue2中，要用vuex的3版本
vue3中，要用vuex的4版本，否则会报错

  1. npm安装vuex（这个项目是vue2，所以安装vuex3）
    npm i vuex@3

  2. 引入vuex

    // main.js
// 引入vuex
import Vuex from 'vuex'

    只有这样，你创建vm的时候，就可以传入一个store配置项

  3. 创建Vuex中最为核心的 store ： src/store/index.js
    Vue | vuex【理解 vuex + vuex开发者工具的使用 + vuex的基本使用和API + 四个map方法的使用+多组件共享数据 +模块化+命名空间 】_第5张图片

    store 为了管理 actions，mutations，state 这三个而出现的，先准备好这三个，然后创建并暴露store

    // 该文件用于创建vuex中最为核心的store

// 引入vue
import Vue from 'vue'
// 引入vuex
import Vuex from 'vuex'
// 使用vuex插件
Vue.use(Vuex)

// 准备actions---用于响应组件中的动作
const actions = {}
// 准备mutations---用于操作数据（state）
const mutations = {}
// 准备state---用于存储数据
const state = {}

// 创建并暴露 store
export default new Vuex.Store({
    // 配置项
    actions,
    mutations,
    state
})

// 准备actions---用于响应组件中的动作
const actions = {}
// 准备mutations---用于操作数据（state）
const mutations = {}
// 准备state---用于存储数据
const state = {}

// 创建并暴露 store
export default new Vuex.Store({
    // 配置项
    actions,
    mutations,
    state
})

    JS执行的时候会把import提升到顶部，与摆放顺序无关，如果放在main.js里 import store from './store' 无论放到哪里都会比Vue.use(Vuex)先执行，要想把 Vue.use(Vuex) 要放到实例化之前只有放进index.js

  4. 在main.js中创建vm时传入store配置项

    ......
// 引入store
import store from './store/index'
......
// 创建vm
new Vue({
    el: '#app',
    render: h => h(App),
    store:store,
    // 安装全局事件总线
    beforeCreate() {
        Vue.prototype.$bus = this;
    }
})

求和案例(vuex版)

  1. 将sum数据交给 vuex的stateVue | vuex【理解 vuex + vuex开发者工具的使用 + vuex的基本使用和API + 四个map方法的使用+多组件共享数据 +模块化+命名空间 】_第6张图片

  2. 组件调用dispatch
    Vue | vuex【理解 vuex + vuex开发者工具的使用 + vuex的基本使用和API + 四个map方法的使用+多组件共享数据 +模块化+命名空间 】_第7张图片

  3. 准备actions对象里面有’jia’这个函数

    actions里面 jia 函数要调用commit函数去提交，函数有两个参数 (context,value)
    context是一个迷你版的store，上面有vuex常用的一些方法，
    常看看参数 context里面有什么
    value是dispatch的第二个参数

  4. 准备mutations对象里面有’jia’这个函数

    mutations里的函数要大写，为了和actions做区分，它有两个参数（state,value）
    state是存储的数据
    value是commit传过来的第二个参数

    Vue | vuex【理解 vuex + vuex开发者工具的使用 + vuex的基本使用和API + 四个map方法的使用+多组件共享数据 +模块化+命名空间 】_第8张图片

  5. 组件里面渲染数据的时候，数据在vc.$store.state里面

  • actions里面可以写业务逻辑，比如if判断语句，定时器等
  • 常看看参数 context里面有什么
  • 如果没有业务逻辑可以直接跳过actions，组件可以直接调用commit到mutations

代码：
Count.vue

<template>
  <div>
    <h1>当前求和为：{{$store.state.sum}}</h1>
    <!-- 获取用户的选择为n -->
    <select v-model.number="n">
      <!-- 将value里的内容强制转换成数值型 -->
      <option value="1">1</option> 
      <option value="2">2</option>
      <option value="3">3</option>
    </select>
    <button @click="increment">+</button>
    <button @click="decrement">-</button>
    <button @click="incrementOdd">当前求和为奇数再加</button>
    <button @click="incrementWait">等一等再加</button>
  </div>
</template>

<script>
export default {
  name: "Count",
  data() {
    return {
      n: 1, // 用户选择的数字
    };
  },
  methods: {
    increment() {
      // 如果没有业务逻辑可以直接调用commit到mutations
      this.$store.commit('JIA',this.n)
    },
    decrement() {
      this.$store.dispatch('jian',this.n)
    },
    incrementOdd() {
      this.$store.dispatch('jiaOdd',this.n)
    },
    incrementWait() {
       this.$store.dispatch('jiaWait',this.n)
    },
  },
  mounted(){
    console.log('Count',this);
  }
};
</script>

src\store\index.js

// 该文件用于创建vuex中最为核心的store

// 引入vue
import Vue from 'vue'
// 引入vuex
import Vuex from 'vuex'
// 使用vuex插件
Vue.use(Vuex)

// 准备actions---用于响应组件中的动作
const actions = {
    jian(context, value) {
        context.commit('JIAN', value)
    },
    jiaOdd(context, value) {
        if (context.state.sum % 2) {
            context.commit('JIA', value)
        }
    },
    jiaWait(context, value) {
        setTimeout(() => {
            context.commit('JIA', value)
        }, 500);
    },

}
// 准备mutations---用于操作数据（state）
const mutations = {
    JIA(state, value) {
        state.sum += value;
    },
    JIAN(state, value) {
        state.sum -= value;
    }
}
// 准备state---用于存储数据
const state = {
    sum: 0, // 当前的和
}

// 创建并暴露 store
export default new Vuex.Store({
    // 配置项
    actions,
    mutations,
    state
})

vuex 的 API

state

  1. vuex 管理的状态对象 （数据）

  2. 它应该是唯一的

  3. 示例代码：

    const state = {
    sum: 0, // 当前的和
}

actions

  1. 值为一个对象，包含多个响应用户动作的回调函数
  2. 通过 commit( )来触发 mutation 中函数的调用, 间接更新 state
  3. 如何触发 actions 中的回调？
    在组件中使用: $store.dispatch('对应的 action 回调名') 触发
  4. 可以包含异步代码（定时器, ajax 等等）
  5. 示例代码：
const actions = {
    jian(context, value) {
        context.commit('JIAN', value)
    },
}

mutations

  1. 值是一个对象，包含多个直接更新 state 的方法
  2. 谁能调用 mutations 中的方法？如何调用？
    在 action 中使用：commit('对应的 mutations 方法名') 触发
  3. mutations 中方法的特点：不能写异步代码、只能单纯的操作 state
  4. 示例代码：
const mutations = {
    JIA(state, value) {
        state.sum += value;
    },
    JIAN(state, value) {
        state.sum -= value;
    }
}

vuex开发者工具的使用

Vue | vuex【理解 vuex + vuex开发者工具的使用 + vuex的基本使用和API + 四个map方法的使用+多组件共享数据 +模块化+命名空间 】_第9张图片

vuex的基本使用

具体步骤见 -求和案例（vuex版）很详细

  1. 初始化数据、配置actions、配置mutations，操作文件store.js

    //引入Vue核心库
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
//引用Vuex
Vue.use(Vuex)

const actions = {
    //响应组件中加的动作
	jia(context,value){
		// console.log('actions中的jia被调用了',miniStore,value)
		context.commit('JIA',value)
	},
}

const mutations = {
    //执行加
	JIA(state,value){
		// console.log('mutations中的JIA被调用了',state,value)
		state.sum += value
	}
}

//初始化数据
const state = {
   sum:0
}

//创建并暴露store
export default new Vuex.Store({
	actions,
	mutations,
	state,
})

  2. 组件中读取vuex中的数据：$store.state.sum

  3. 组件中修改vuex中的数据：$store.dispatch('action中的方法名',数据)或 $store.commit('mutations中的方法名',数据)

    备注：若没有网络请求或其他业务逻辑，组件中也可以越过actions，即不写dispatch，直接编写commit

getters配置项

  1. 概念：当state中的数据需要经过加工后再使用时，可以使用getters加工。

  2. 在store\index.js中追加getters配置

    ......
//准备 getters ---用于将state中的数据进行加工
const getters = {
	bigSum(state){
		return state.sum * 10
	}
}

//创建并暴露store
export default new Vuex.Store({
	......
	getters
})

  3. 组件中读取数据：$store.getters.bigSum

Vue | vuex【理解 vuex + vuex开发者工具的使用 + vuex的基本使用和API + 四个map方法的使用+多组件共享数据 +模块化+命名空间 】_第10张图片

Vue | vuex【理解 vuex + vuex开发者工具的使用 + vuex的基本使用和API + 四个map方法的使用+多组件共享数据 +模块化+命名空间 】_第11张图片

四个map方法的使用

首先导入四个map方法 import {mapState,mapGetters,mapMutations,mapActions} from 'vuex'

计算属性优化 mapState ， mapGetters

  1. mapState方法：用于帮助我们映射state中的数据 为计算属性

    computed: {
    //借助 mapState生成计算属性：sum、school、subject（对象写法）
     ...mapState({sum:'sum',school:'school',subject:'subject'}),
         
    //借助 mapState生成计算属性：sum、school、subject（数组写法）
    ...mapState(['sum','school','subject']),
},

  2. mapGetters方法：用于帮助我们映射getters中的数据为计算属性

    computed: {
    //借助 mapGetters生成计算属性：bigSum（对象写法）
    ...mapGetters({bigSum:'bigSum'}),

    //借助 mapGetters生成计算属性：bigSum（数组写法）
    ...mapGetters(['bigSum'])
},

    ES6语法，扩展运算符... ，可以把里面的内容展开放入这计算属性computed里面

Vue | vuex【理解 vuex + vuex开发者工具的使用 + vuex的基本使用和API + 四个map方法的使用+多组件共享数据 +模块化+命名空间 】_第12张图片

方法优化 mapActions，mapMutations

  1. mapActions方法：用于帮助我们生成与actions对话的方法，即：包含$store.dispatch(xxx)的函数

    methods:{
    //靠mapActions生成：incrementOdd、incrementWait（对象形式）
    ...mapActions({incrementOdd:'jiaOdd',incrementWait:'jiaWait'})

    //靠mapActions生成：incrementOdd、incrementWait（数组形式）
    ...mapActions(['jiaOdd','jiaWait'])
}

  2. mapMutations方法：用于帮助我们生成与mutations对话的方法，即：包含$store.commit(xxx)的函数

    methods:{
    //靠mapActions生成：increment、decrement（对象形式）
    ...mapMutations({increment:'JIA',decrement:'JIAN'}),
    
    //靠mapMutations生成：JIA、JIAN（对象形式）
    ...mapMutations(['JIA','JIAN']),
}

备注：mapActions与mapMutations使用时，若需要传递参数需要：在模板中绑定事件时传递好参数，否则参数是事件对象。

Vue | vuex【理解 vuex + vuex开发者工具的使用 + vuex的基本使用和API + 四个map方法的使用+多组件共享数据 +模块化+命名空间 】_第13张图片

多组件共享数据

Vue | vuex【理解 vuex + vuex开发者工具的使用 + vuex的基本使用和API + 四个map方法的使用+多组件共享数据 +模块化+命名空间 】_第14张图片
Count.vue

<template>
  <div>
    <h1>当前求和为：{{ sum }}</h1>
    <h3>当前求和放大十倍后为：{{ bigSum }}</h3>
    <h3>我在{{ school }}学习{{ subject }}</h3>
    <!-- 获取用户的选择为n -->
    <select v-model.number="n">
      <!-- 将value里的内容强制转换成数值型 -->
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
    </select>
    <button @click="increment(n)">+</button>
    <button @click="decrement(n)">-</button>
    <button @click="incrementOdd(n)">当前求和为奇数再加</button>
    <button @click="incrementWait(n)">等一等再加</button>
    <h3 style="color:red">下方组件的总人数是：{{personList.length}}</h3>
  </div>
</template>

<script>
import { mapState, mapGetters,mapMutations,mapActions } from "vuex";
export default {
  name: "Count",
  data() {
    return {
      n: 1, // 用户选择的数字
    };
  },
  computed: {
    ...mapState(["sum", "school", "subject","personList"]),
    ...mapGetters(["bigSum"]),
  },
  methods: {
    // 借助mapMutations生成对应的方法，方法中会调用commit去联系Mutations，记得在事件中传参 （对象写法）
    ...mapMutations({increment:'JIA',decrement:'JIAN'}),

    // 借助mapActions生成对应的方法，方法中会调用dispatch去联系Actions，记得在事件中传参 （对象写法）
    ...mapActions({incrementOdd:'jiaOdd',incrementWait:'jiaWait'}),

  },
  mounted() {
    const x = mapState({ he: "sum", xuexiao: "school", xueke: "subject" });
    console.log("x", x); // {he: ƒ, xuexiao: ƒ, xueke: ƒ}
  },
};
</script>
  
<style>
button {
  margin-left: 5px;
}
</style>

Person.vue

<template>
  <div>
    <h3 style="color:red">Count组件的求和为：{{sum}}</h3>
    <h1>人员列表</h1>
    <input type="text" placeholder="请输入名字" v-model="name" />
    <button @click="add">添加</button>
    <ul>
      <li v-for="p in personList" :key="p.id">{{ p.name }}</li>
    </ul>
  </div>
</template>

<script>
import { nanoid } from "nanoid";
export default {
  name: "Person",
  data() {
    return {
      name: "",
    };
  },
  computed: {
    personList() {
      return this.$store.state.personList;
    },
    sum(){
        return this.$store.state.sum;
    }
  },
  methods: {
    add() {
      const personObj = { id: nanoid(), name: this.name };
      this.$store.commit('ADD_PERSON',personObj)
      this.name=''
    },
  },
};
</script>

<style>
</style>

store/index.js

// 该文件用于创建vuex中最为核心的store

// 引入vue
import Vue from 'vue'
// 引入vuex
import Vuex from 'vuex'
// 使用vuex插件
Vue.use(Vuex)

// 准备actions---用于响应组件中的动作
const actions = {
    jiaOdd(context, value) {
        if (context.state.sum % 2) {
            context.commit('JIA', value)
        }
    },
    jiaWait(context, value) {
        setTimeout(() => {
            context.commit('JIA', value)
        }, 500);
    },
}
// 准备mutations---用于操作数据（state）
const mutations = {
    JIA(state, value) {
        state.sum += value;
    },
    JIAN(state, value) {
        state.sum -= value;
    },
    ADD_PERSON(state, value) {
        console.log('mutations中的addperson被调用了');
        state.personList.unshift(value)
    }
}
// 准备state---用于存储数据
const state = {
    sum: 0, // 当前的和
    school: '尚硅谷',
    subject: '前端',
    personList: [
        { id: '001', name: '张三' }
    ]
}

// 准备getters ---用于将state中的数据进行加工
const getters = {
    bigSum(state) {
        return state.sum * 10
    }
}
// 创建并暴露 store
export default new Vuex.Store({
    // 配置项
    actions,
    mutations,
    state,
    getters
})

模块化+命名空间

  1. 目的：让代码更好维护，让多种数据分类更加明确。

  2. 修改store.js—> 开启命名空间，区分模块

    const countAbout = {
namespaced:true,//开启命名空间
state:{x:1},
mutations: { ... },
actions: { ... },
getters: {
 bigSum(state){
    return state.sum * 10
 }
}
}

const personAbout = {
namespaced:true,//开启命名空间
state:{ ... },
mutations: { ... },
actions: { ... }
}

const store = new Vuex.Store({
modules: {
 countAbout,
 personAbout
}
})

  3. 开启命名空间后，组件中读取state数据：

    //方式一：自己直接读取
this.$store.state.personAbout.list
//方式二：借助mapState读取：
...mapState('countAbout',['sum','school','subject']), // 读取countAbout 里面的 sum,school.....

  4. 开启命名空间后，组件中读取getters数据：

    //方式一：自己直接读取
this.$store.getters['personAbout/firstPersonName']
//方式二：借助mapGetters读取：
...mapGetters('countAbout',['bigSum'])

  5. 开启命名空间后，组件中调用dispatch

    //方式一：自己直接dispatch
this.$store.dispatch('personAbout/addPersonWang',person)
//方式二：借助mapActions：
...mapActions('countAbout',{incrementOdd:'jiaOdd',incrementWait:'jiaWait'})

  6. 开启命名空间后，组件中调用commit

    //方式一：自己直接commit
this.$store.commit('personAbout/ADD_PERSON',person)
//方式二：借助mapMutations：
...mapMutations('countAbout',{increment:'JIA',decrement:'JIAN'}),

注意：只有指定相应的模块名才能找到对应的数据和方法（前提是模块开启了命名空间）

Vue | vuex【理解 vuex + vuex开发者工具的使用 + vuex的基本使用和API + 四个map方法的使用+多组件共享数据 +模块化+命名空间 】_第15张图片
代码：
Count.vue

<template>
  <div>
    <h1>当前求和为：{{ sum }}</h1>
    <h3>当前求和放大十倍后为：{{ bigSum }}</h3>
    <h3>我在{{ school }}学习{{ subject }}</h3>
    <!-- 获取用户的选择为n -->
    <select v-model.number="n">
      <!-- 将value里的内容强制转换成数值型 -->
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
    </select>
    <button @click="increment(n)">+</button>
    <button @click="decrement(n)">-</button>
    <button @click="incrementOdd(n)">当前求和为奇数再加</button>
    <button @click="incrementWait(n)">等一等再加</button>
    <h3 style="color:red">下方组件的总人数是：{{personList.length}}</h3>
  </div>
</template>

<script>
import { mapState, mapGetters,mapMutations,mapActions } from "vuex";
export default {
  name: "Count",
  data() {
    return {
      n: 1, // 用户选择的数字
    };
  },
  computed: {
    ...mapState('countAbout',['sum','school','subject']),
    ...mapState('personAbout',['personList']),
    ...mapGetters('countAbout',["bigSum"]),
  },
  methods: {
    // 借助mapMutations生成对应的方法，方法中会调用commit去联系Mutations，记得在事件中传参 （对象写法）
    ...mapMutations('countAbout',{increment:'JIA',decrement:'JIAN'}),

    // 借助mapActions生成对应的方法，方法中会调用dispatch去联系Actions，记得在事件中传参 （对象写法）
    ...mapActions('countAbout',{incrementOdd:'jiaOdd',incrementWait:'jiaWait'}),

  },
  mounted() {
    const x = mapState({ he: "sum", xuexiao: "school", xueke: "subject" });
    console.log("x", x); // {he: ƒ, xuexiao: ƒ, xueke: ƒ}
  },
};
</script>
  
<style>
button {
  margin-left: 5px;
}
</style>

Person.vue

<template>
  <div>
    <h3 style="color: red">Count组件的求和为：{{ sum }}</h3>
    <h1>人员列表</h1>
    <h3>列表中第一个人的名字是:{{ firstPersonName }}</h3>
    <input type="text" placeholder="请输入名字" v-model="name" />
    <button @click="add">添加</button>
    <button @click="addWang">添加一个姓王的人</button>
    <button @click="addPersonServer">添加一个人，名字随机</button>
    <ul>
      <li v-for="p in personList" :key="p.id">{{ p.name }}</li>
    </ul>
  </div>
</template>

<script>
import { nanoid } from "nanoid";
export default {
  name: "Person",
  data() {
    return {
      name: "",
    };
  },
  computed: {
    personList() {
      return this.$store.state.personAbout.personList;
    },
    sum() {
      return this.$store.state.countAbout.sum;
    },
    firstPersonName() {
      return this.$store.getters["personAbout/firstPersonName"];
    },
  },
  methods: {
    add() {
      const personObj = { id: nanoid(), name: this.name };
      this.$store.commit("personAbout/ADD_PERSON", personObj);
      this.name = "";
    },
    addWang() {
      const personObj = { id: nanoid(), name: this.name };
      this.$store.dispatch("personAbout/addPersonWng", personObj)
       this.name = "";
    },
    addPersonServer(){
        this.$store.dispatch("personAbout/addPersonServer")
    }
  },
};
</script>

<style>
</style>

store/index.js

// 该文件用于创建vuex中最为核心的store

// 引入vue
import Vue from "vue";
// 引入vuex
import Vuex from "vuex";
// 引入axios
import axios from 'axios'
import { nanoid } from "nanoid";
// 使用vuex插件
Vue.use(Vuex);

// 求和功能相关的配置
const countOptions = {
  namespaced: true,
  actions: {
    jiaOdd(context, value) {
      if (context.state.sum % 2) {
        context.commit("JIA", value);
      }
    },
    jiaWait(context, value) {
      setTimeout(() => {
        context.commit("JIA", value);
      }, 500);
    },
  },
  mutations: {
    JIA(state, value) {
      state.sum += value;
    },
    JIAN(state, value) {
      state.sum -= value;
    },
  },
  state: {
    sum: 0, // 当前的和
    school: "尚硅谷",
    subject: "前端",
  },
  getters: {
    bigSum(state) {
      return state.sum * 10;
    },
  },
};

// 人员管理功能相关的配置
const personOptions = {
  namespaced: true,
  actions: {
    addPersonWng(context,value){
        if(value.name.indexOf('王') === 0){
            context.commit('ADD_PERSON',value)
        }
    },
    addPersonServer(context){
        axios.get('https://api.uixsj.cn/hitokoto/get?type=social').then(
            response=>{
                context.commit('ADD_PERSON',{id:nanoid(),name:response.data})
            },
            error=>{
                alert(error.message)
            }
        )
    }
  },
  mutations: {
    ADD_PERSON(state, value) {
      console.log("mutations中的addperson被调用了");
      state.personList.unshift(value);
    },
  },
  state: {
    personList: [{ id: "001", name: "张三" }],
  },
  getters: {
    firstPersonName(state){
        return state.personList[0].name
    }
  },
};

// 创建并暴露 store
export default new Vuex.Store({
  modules: {
    countAbout: countOptions,
    personAbout: personOptions,
  },
});

你可能感兴趣的:(Vue,vue.js,javascript,前端,vuex)

  • javascript添加p元素，html添加文字，appendChild 游勇一 javascripthtml添加pappendChild
    javascript添加p元素，html添加文字，appendChild。网页添加p元素效果截图。个人签名：游志勇，预制板，南托岭预制场。文字展示#wordsadd{font-size:70px;word-break:break-all;}#wordsaddp{margin:002px0;padding:002px0;line-height:93%;}.btn_width{width:90px;}
  • CesiumJS+SuperMap3D.js混用实现可视域分析 S3M图层加载 裁剪区域绘制 SteveJi666 WebGLcesiumEarthSDKSuperMap3djavascript前端arcgis
    版本简介：cesium：1.99；Supermap3D：SuperMapiClientJavaScript11i(2023)；官方下载文档链家：SuperMap技术资源中心|为您提供全面的在线技术服务示例参考：support.supermap.com.cn:8090/webgl/Cesium/examples/webgl/examples.html#analysissupport.supermap
  • 前端使用react-intl-universal进行国际化 Stephy_Yy #调研reactjsjavascriptcss
    一、国际化/i18n目前国际化，就是开发者写对象，一个key关联若干语种的翻译。相比于浏览器自带的翻译功能，语义更加准确。“国际化”的简称：i18n（其来源是英文单词internationalization的首末字符i和n，18为中间的字符数）二、react项目国际化react-intl是业界最受欢迎的软件包之一：React-intl是雅虎的语言国际化开源项目FormatJS的一部分，通过其提供的
  • html打开本地excel文件夹,html使用excel表格数据库-html读取本地excel文件并展示 睿理
    html表格如何导入到excel中在vs里面用添加数据源就可以啊,再使用数据控件,就可以操作.添加数据源可以用odbc数据源,两种方式1,是在控制面板的管理工具里在ODBC里先设置好.2,是使用连接字符串.用vs的添加数据源向导做.html中有没有类似excel表格，可以填数的表格控件？首先html不能读取本地excel文件其次就算是javascript也是不允许的这是为了安全考虑如果前端脚本可以
  • 如何在 Python 中声明一个静态属性? 潮易 python开发语言
    在Python中，静态属性的定义和使用方式与JavaScript中的类似，主要是通过`@staticmethod`装饰器来实现。静态属性不需要实例化对象就可以访问，它们属于类本身。###如何声明一个静态属性：1.首先，需要在属性名前添加`@staticmethod`装饰器。2.接下来，定义一个普通方法，该方法的第一个参数通常为`cls`（用于表示类的引用）。###代码示例：```pythoncla
  • 数据格式：什么是JSON和XML isNotNullX jsonxml
    JSON和XML都是数据交换的一种格式，用于在不同的系统和应用程序之间传输和存储数据。本文将解释JSON和XML的基础内容，并探讨两者的不同。一·什么是JSON？1.JSON（JavaScriptObjectNotation）即JavaScript对象标记法：-JSON是一种轻量级的数据交换格式，易于人阅读和编写，同时也易于机器解析和生成。-JSON基于JavaScript的一个子集，但JSON是
  • Java在Controller生成Excel供前端直接下载 pengjunlee SpringBoot重点详解导出文件POIexcelController
    在许多企业办公系统中，经常会有用户要求，需要对数据进行统计并且可以直接下载Excel文件，这样子的话，既然客户提出了要求，我们就应该去满足吖，毕竟客户是上帝嘛，那么我们如何去实现呢？且看我为你一一道来。POI简介JakartaPOI是一套用于访问微软格式文档的JavaAPI。JakartaPOI有很多组件组成，其中有用于操作Excel格式文件的HSSF和用于操作Word的HWPF，在各种组件中目前
  • 解决前端导出excel文件，打开为乱码 荔枝，你让我拿什么荔枝！ vue前端elementuivue.js
    前端开发中，导入和导出文件是比较常见的业务场景，常见的情况是：后端返回一个二进制的流文件，前端将其转化为excel文件即可。但是往往会出现转化后的excel文件内容位乱码的情况，本文中提供了两个解决方案：方案一：用户自定义上传方法添加附件添加附件代码解读：上述代码采用了element-ui的el-upload文件上传的组件。改组件有两种文件上传的方式：1.组件自带的上传方法，只需要给其设置acti
  • HighCharts图表自动化简介 知识的宝藏 Selenium高级篇Selenium图表自动化测试highcharts图表自动化Selenium图表自动化图表自动化测试highchartsSelenium
    什么是分析数据？在任何应用程序中捕获并以图形或图表形式显示的分析数据是任何产品或系统的关键部分，因为它提供了对实时数据的洞察。验证此类分析数据非常重要，因为不准确的数据可能会在报告中产生问题，并可能影响应用程序/系统的其他相关领域。什么是HighChart？Highcharts是一个用纯JavaScript编写的j基于SVG成图技术的图表库，提供了一种简单的方法来向您的网站或Web应用程序添加交互
  • vue3+ts+supermap icilent3d for cesium功能集合 用你的胜利博我一笑吧 arcgis
    会把各项功能链接放在这1.vue3配置supermapicilent3dforcesiumvue3中使用supermapicilent3dforcesium_npm引入supermapgis-CSDN博客2.功能2.1加载天地图，加载地形，夸大地形supermapicilent3dforcesium加载地形并夸大地形-CSDN博客2.2加载雨雪天气，并添加白色的材质2.3调整图层高度，透明度等信息
  • CesiumJS+SuperMap3D.js混用实现通视分析 SteveJi666 WebGLcesiumEarthSDKSuperMap3djavascript前端arcgis
    版本简介：cesium：1.99；Supermap3D：SuperMapiClientJavaScript11i(2023)；官方下载文档链家：SuperMap技术资源中心|为您提供全面的在线技术服务示例参考：support.supermap.com.cn:8090/webgl/Cesium/examples/webgl/examples.html#analysissupport.supermap
  • 2022年技术胖私藏工具分享 300+编程实用工具 wudongyu
    2022年技术胖私藏工具分享300+编程实用工具Javascript工具Underscore.js一套完善的函数式编程的接口，更方便地在JavaScript中实现函数式编程https://underscorejs.org/fastclick用于消除物理点击和click移动浏览器上事件触发之间的300毫秒延迟https://github.com/ftlabs/fastclickLodash一致性、模
  • java ajax_Java Ajax入门 孤独患喆 javaajax
    接下来整理一下Ajax相关的内容，AJAX(asynchronousjsandxml)，即异步的JavaScript和xml，它的主要作用就是让页面不必等待服务器返回整个页面信息，而可以通过异步的方式给服务器发送数据和获取数据，对页面进行局部刷新，是一种提高用户体验的技术。同步和异步同步和异步的主要区别如下；(1)同步：一个响应结束后才能发送下一个请求，页面在请求期间不能做其他事情。(2)异步：不
  • 小程序开关组件 phoebe_l_ 小程序
    前提是vant组件库不太好改，干脆就手写了一个{{leftText}}{{rightText}}import{ref,computed}from'vue';constprops=defineProps({leftText:{type:String,default:''},rightText:{type:String,default:''}});constisReverseOrder=ref(tru
  • VUE实现大小缩放轮播图 书边事. vue.js前端javascript
    效果图import{ref,computed,reactive,watch,onMounted}from'vue';exportdefault{props:{/***轮播数据来源*/source:{type:Array,default:()=>[{img:require('@/assets/imgs/test/1.png')},{img:require('@/assets/imgs/test/1.
  • JavaScript 基础 - 第15天 +码农快讯+ JavaScript学习笔记javascript前端开发语言
    文章目录JavaScript基础-第15天深浅拷贝浅拷贝深拷贝通过JSON序列化实现js库lodash实现深拷贝通过递归实现深拷贝异常处理throwtry...catchdebugger处理this改变thiscallapplybindthis指向性能优化防抖（debounce）手写防抖函数节流（throttle）手写节流函数JavaScript基础-第15天深浅拷贝浅拷贝浅拷贝：把对象拷贝给一个
  • JavaScript 基础 - 第13天 +码农快讯+ JavaScript学习笔记javascript开发语言ecmascript
    文章目录JavaScript基础-第13天深入对象创建对象三种方式构造函数new实例化过程实例成员&静态成员实例成员静态成员一切皆对象内置构造函数ObjectArrayStringNumberJavaScript基础-第13天了解面向对象编程的基础概念及构造函数的作用，体会JavaScript一切皆对象的语言特征，掌握常见的对象属性和方法的使用。深入对象内置构造函数综合案例深入对象了解面向对象的基
  • vue 两个弹窗时出现，打开第二个弹窗 是灰色的，再点击才是正常 光影3415 vue.jsjavascript前端
    如果你使用的是ElementUI，el-dialog组件有一个append-to-body属性，这个属性可以将弹窗的DOM直接挂载到body标签上，这样可以避免一些层级嵌套问题：
  • 【Java】如何将二进制转换成MultipartFile Mxin5 Javajava开发语言
    业务场景：前端发送请求到后端进行文件上传，后端接收文件并调用第三方接口进行文件处理，响应格式为二进制，然后我们需要将二进制进行转换为MultipartFile进行文件上传。如果你想要将File转换成MultipartFile，可以参考：【Java】如何将File转换成MultipartFile_javafile转multipartfile_MXin5的博客-CSDN博客1.传递二进制respons
  • 【Java将File完美转为MultipartFile】:亲测有效 阿火~ java
    由于multipartFile有很多有用的api,但是有时候我们接收到前台的参数是文件名和文件内容,而不是文件,此时不能使用multipartFile接收,导致处理起来很不方便,比如我用minio上传文件,minio需要multipartFile类型的文件,而我拿到前端传来的文件名和文件内容只能自己通过File类创建文件,所以如果想用multipartFile类型就需要自己转换,然而天不遂人愿,并
  • js的书写位置和css的书写位置的区别？为什么要这样写？ 李是啥也不会 javascriptcss开发语言
    JavaScript和CSS的书写位置有以下区别：CSS通常写在标签中，或者在外部样式表文件中（）。CSS主要用于控制页面的视觉样式和布局，通常在HTML文件的部分引入，以确保在页面渲染时样式已经加载完毕，从而避免样式闪烁。JavaScript通常写在标签中，或者在外部脚本文件中（）。JavaScript用于添加页面的动态行为和交互。一般建议将JavaScript放在HTML文件的末尾（标签之前）
  • 基于Google authentic实现的双因子登录认证系统前后台基于SSMP+Vue+Element（解决SecureRandom造成的服务器请求缓慢） Tate_Brown gitJAVAIDEADEBUGVUE
    用md5两次加盐密码，可以灵活更换算法--直接上代码地址：JAVA后台：https://github.com/TateBrownJava/TwoFALogindemoBackendVue前端：https://github.com/TateBrownJava/TwoFALoginDemofrontend-------------------------------------------------
  • vue3 + vite + js 配置Eslint + prettier 菜鸡的崛起 vuejavascriptvue
    第一步安装ESlintnpmieslint@latest-D或pnpmaddeslint@latest-D/pnpminstalleslint@latest-D或yarnaddeslint@latest-D第二步初始化Eslintnpxeslint--init执行npxeslint--init控制台会出现以下步骤1）你想如何使用ESLint（选择最后一个）Youcanalsorunthiscomm
  • 【网络安全】漏洞挖掘：php代码审计 秋说 网络安全phpweb安全漏洞挖掘
    未经许可，不得转载。文章目录正文正文在应用程序中，通过一个JavaScript注释发现了一个备份ZIP文件。解压后，获取了应用程序的代码，其中包含如下代码片段：代码首先检查变量$action是否等于'convert'，如果是，则继续执行。随后对传入的变量$data使用trim()函数去除两端空白字符，并使用eval()函数执行$data的内容。显然，代码对$data没有进行任何过滤或验证，因此可以
  • 前端基础面试题·第三篇——JavaScript（其二） DT—— 前端面试javascript面试
    1.深浅拷贝1.浅拷贝浅拷贝会创建一个新的对象，这个对象有着原始对象属性值的一份精确拷贝。如果属性是基本类型，拷贝的就是基本类型的值，如果属性是引用类型，拷贝就是改引用类型的地址。//常见的浅拷贝1.Object.assign({},obj)//对象浅拷贝assign⽅法可以⽤于处理数组，不过会把数组视为对象，⽐如这⾥会把⽬标数组视为是属性为0、1、2的对象，所以源数组的0、1属性的值覆盖了⽬标对
  • nginx部署前端项目的一些配置【刚入门】 weixin_30847271 运维前端ViewUI
    前期准备：在linux上安装nginx，我用的是腾讯云centos7服务器，具体的安装过程可以到腾讯云的开发者实验室里体验，自己先试试水。修改nginx.conf配置文件，我用到的修改只是以下的部分。1.端口号2.项目的存放位置server{listen8088default_server;#访问的端口号。listen[::]:8088default_server;server_name_;#ro
  • vue在一个组件引用其他组件 hzw0510 Vuevue.js前端javascript
    在vue一个组件中引用另一个组件的步骤必须在script中导入要引用的组件需要在exportdefault的components引用导入的组件（这一步经常忘记）在template使用导入的组件importVue01from"@/components/Vue01.vue";
  • 计算机毕业设计Node.js+Vue基于Java的医院预约挂号系统(程序+源码+LW+部署) Nodejs洋洋 程序 javavue.js课程设计
    该项目含有源码、文档、程序、数据库、配套开发软件、软件安装教程。欢迎交流项目运行环境配置：Node.js+Vscode+Mysql5.7+HBuilderX+Navicat11+Vue+Express。项目技术：Express框架+Node.js+Vue等等组成，B/S模式+Vscode管理+前后端分离等等。环境需要1.运行环境：最好是Nodejs最新版，我们在这个版本上开发的。其他版本理论上也可
  • ajax讲解 夜不眠，码三千 okhttp
    1.AJAX概述1.1什么是ajaxAJAX（AsynchronousJavascriptAndXML）翻译成中文就是“异步Javascript和XML”。即使用Javascript语言与服务器进行异步交互，传输的数据为XML（当然，传输的数据不只是XML）。AJAX还有一个最大的特点就是，当服务器响应时，不用刷新整个浏览器页面，而是可以局部刷新。这一特点给用户的感受是在不知不觉中完成请求和响应过
  • AJAX异步请求数据 铸键为犁 JavaWebajaxservletjavascript
    文章目录前言一、AJAX是什么？二、使用步骤1.语法格式2.示例2.注意事项总结前言本篇主要介绍怎么使用AJAX向服务器请求数据。一、AJAX是什么？异步请求技术,可以实现页面局部刷新,在不刷新页面的情况下发送请求到后台加载数据,并且展现在前端二、使用步骤1.语法格式代码如下：$.get(url,data,function(data){})发送get请求参数1:url是后台服务器地址参数2:dat
  • 遍历dom 并且存储（将每一层的DOM元素存在数组中） 换个号韩国红果果 JavaScripthtml
    数组从0开始！！ var a=[],i=0; for(var j=0;j<30;j++){ a[j]=[];//数组里套数组，且第i层存储在第a[i]中 } function walkDOM(n){ do{ if(n.nodeType!==3)//筛选去除#text类型 a[i].push(n); //con
  • Android+Jquery Mobile学习系列(9)-总结和代码分享 白糖_ JQuery Mobile
    目录导航   经过一个多月的边学习边练手，学会了Android基于Web开发的毛皮，其实开发过程中用Android原生API不是很多，更多的是HTML/Javascript/Css。   个人觉得基于WebView的Jquery Mobile开发有以下优点： 1、对于刚从Java Web转型过来的同学非常适合，只要懂得HTML开发就可以上手做事。 2、jquerym
  • impala参考资料 dayutianfei impala
    记录一些有用的Impala资料   1. 入门资料 >>官网翻译：     http://my.oschina.net/weiqingbin/blog?catalog=423691   2. 实用进阶 >>代码&架构分析：     Impala/Hive现状分析与前景展望：http
  • JAVA 静态变量与非静态变量初始化顺序之新解 周凡杨 java静态非静态顺序
    今天和同事争论一问题，关于静态变量与非静态变量的初始化顺序，谁先谁后，最终想整理出来！测试代码： import java.util.Map; public class T { public static T t = new T(); private Map map = new HashMap(); public T(){ System.out.println(&quo
  • 跳出iframe返回外层页面 g21121 iframe
    在web开发过程中难免要用到iframe，但当连接超时或跳转到公共页面时就会出现超时页面显示在iframe中，这时我们就需要跳出这个iframe到达一个公共页面去。 首先跳转到一个中间页，这个页面用于判断是否在iframe中，在页面加载的过程中调用如下代码： <script type="text/javascript"> //<!-- function
  • JAVA多线程监听JMS、MQ队列 510888780 java多线程
    背景：消息队列中有非常多的消息需要处理，并且监听器onMessage（）方法中的业务逻辑也相对比较复杂，为了加快队列消息的读取、处理速度。可以通过加快读取速度和加快处理速度来考虑。因此从这两个方面都使用多线程来处理。对于消息处理的业务处理逻辑用线程池来做。对于加快消息监听读取速度可以使用1.使用多个监听器监听一个队列；2.使用一个监听器开启多线程监听。 对于上面提到的方法2使用一个监听器开启多线
  • 第一个SpringMvc例子 布衣凌宇 spring mvc
    第一步：导入需要的包； 第二步：配置web.xml文件 <?xml version="1.0" encoding="UTF-8"?> <web-app version="2.5" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi=
  • 我的spring学习笔记15-容器扩展点之PropertyOverrideConfigurer aijuans Spring3
    PropertyOverrideConfigurer类似于PropertyPlaceholderConfigurer，但是与后者相比，前者对于bean属性可以有缺省值或者根本没有值。也就是说如果properties文件中没有某个bean属性的内容，那么将使用上下文（配置的xml文件）中相应定义的值。如果properties文件中有bean属性的内容，那么就用properties文件中的值来代替上下
  • 通过XSD验证XML antlove xmlschemaxsdvalidationSchemaFactory
    1. XmlValidation.java package xml.validation; import java.io.InputStream; import javax.xml.XMLConstants; import javax.xml.transform.stream.StreamSource; import javax.xml.validation.Schem
  • 文本流与字符集 百合不是茶 PrintWrite()的使用字符集名字 别名获取
    文本数据的输入输出;           输入;数据流,缓冲流         输出;介绍向文本打印格式化的输出PrintWrite();   package 文本流; import java.io.FileNotFound
  • ibatis模糊查询sqlmap-mapping-**.xml配置 bijian1013 ibatis
            正常我们写ibatis的sqlmap-mapping-*.xml文件时，传入的参数都用##标识，如下所示： <resultMap id="personInfo" class="com.bijian.study.dto.PersonDTO"> <res
  • java jvm常用命令工具——jdb命令(The Java Debugger) bijian1013 javajvmjdb
            用来对core文件和正在运行的Java进程进行实时地调试，里面包含了丰富的命令帮助您进行调试，它的功能和Sun studio里面所带的dbx非常相似，但 jdb是专门用来针对Java应用程序的。         现在应该说日常的开发中很少用到JDB了，因为现在的IDE已经帮我们封装好了，如使用ECLI
  • 【Spring框架二】Spring常用注解之Component、Repository、Service和Controller注解 bit1129 controller
    在Spring常用注解第一步部分【Spring框架一】Spring常用注解之Autowired和Resource注解（http://bit1129.iteye.com/blog/2114084）中介绍了Autowired和Resource两个注解的功能，它们用于将依赖根据名称或者类型进行自动的注入，这简化了在XML中，依赖注入部分的XML的编写，但是UserDao和UserService两个bea
  • cxf wsdl2java生成代码super出错,构造函数不匹配 bitray super
        由于过去对于soap协议的cxf接触的不是很多,所以遇到了也是迷糊了一会.后来经过查找资料才得以解决. 初始原因一般是由于jaxws2.2规范和jdk6及以上不兼容导致的.所以要强制降为jaxws2.1进行编译生成.我们需要少量的修改: 我们原来的代码 wsdl2java com.test.xxx -client http://..... 修改后的代
  • 动态页面正文部分中文乱码排障一例 ronin47
    公司网站一部分动态页面，早先使用apache+resin的架构运行，考虑到高并发访问下的响应性能问题，在前不久逐步开始用nginx替换掉了apache。 不过随后发现了一个问题，随意进入某一有分页的网页，第一页是正常的（因为静态化过了）；点“下一页”，出来的页面两边正常，中间部分的标题、关键字等也正常，唯独每个标题下的正文无法正常显示。 因为有做过系统调整，所以第一反应就是新上
  • java-54- 调整数组顺序使奇数位于偶数前面 bylijinnan java
    import java.util.Arrays; import java.util.Random; import ljn.help.Helper; public class OddBeforeEven { /** * Q 54 调整数组顺序使奇数位于偶数前面 * 输入一个整数数组，调整数组中数字的顺序，使得所有奇数位于数组的前半部分，所有偶数位于数组的后半
  • 从100PV到1亿级PV网站架构演变 cfyme 网站架构
    一个网站就像一个人，存在一个从小到大的过程。养一个网站和养一个人一样，不同时期需要不同的方法，不同的方法下有共同的原则。本文结合我自已14年网站人的经历记录一些架构演变中的体会。 1：积累是必不可少的 架构师不是一天练成的。 1999年，我作了一个个人主页，在学校内的虚拟空间，参加了一次主页大赛，几个DREAMWEAVER的页面，几个TABLE作布局，一个DB连接，几行PHP的代码嵌入在HTM
  • [宇宙时代]宇宙时代的GIS是什么？ comsci Gis
           我们都知道一个事实，在行星内部的时候，因为地理信息的坐标都是相对固定的，所以我们获取一组GIS数据之后，就可以存储到硬盘中，长久使用。。。但是，请注意，这种经验在宇宙时代是不能够被继续使用的          宇宙是一个高维时空
  • 详解create database命令 czmmiao database
    完整命令 CREATE DATABASE mynewdb   USER SYS IDENTIFIED BY sys_password   USER SYSTEM IDENTIFIED BY system_password   LOGFILE GROUP 1 ('/u01/logs/my/redo01a.log','/u02/logs/m
  • 几句不中听却不得不认可的话 datageek
    1、人丑就该多读书。 2、你不快乐是因为：你可以像猪一样懒，却无法像只猪一样懒得心安理得。 3、如果你太在意别人的看法，那么你的生活将变成一件裤衩，别人放什么屁，你都得接着。 4、你的问题主要在于：读书不多而买书太多，读书太少又特爱思考，还他妈话痨。 5、与禽兽搏斗的三种结局：(1)、赢了，比禽兽还禽兽。(2)、输了，禽兽不如。(3)、平了，跟禽兽没两样。结论：选择正确的对手很重要。 6
  • 1 14:00 PHP中的“syntax error, unexpected T_PAAMAYIM_NEKUDOTAYIM”错误 dcj3sjt126com PHP
    原文地址：http://www.kafka0102.com/2010/08/281.html   因为需要，今天晚些在本机使用PHP做些测试，PHP脚本依赖了一堆我也不清楚做什么用的库。结果一跑起来，就报出类似下面的错误：“Parse error: syntax error, unexpected T_PAAMAYIM_NEKUDOTAYIM in /home/kafka/test/
  • xcode6 Auto layout and size classes dcj3sjt126com ios
    官方GUI   https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/AutolayoutPG/Introduction/Introduction.html   iOS中使用自动布局（一）   http://www.cocoachina.com/ind
  • 通过PreparedStatement批量执行sql语句【sql语句相同，值不同】 梦见x光 sql事务批量执行
    比如说：我有一个List需要添加到数据库中，那么我该如何通过PreparedStatement来操作呢？ public void addCustomerByCommit(Connection conn , List<Customer> customerList) {    String sql = "inseret into customer(id
  • 程序员必知必会----linux常用命令之十【系统相关】 hanqunfeng Linux常用命令
    一.linux快捷键 Ctrl+C : 终止当前命令 Ctrl+S : 暂停屏幕输出 Ctrl+Q : 恢复屏幕输出 Ctrl+U : 删除当前行光标前的所有字符 Ctrl+Z : 挂起当前正在执行的进程 Ctrl+L : 清除终端屏幕，相当于clear   二.终端命令 clear : 清除终端屏幕 reset : 重置视窗，当屏幕编码混乱时使用 time com
  • NGINX IXHONG nginx
    pcre 编译安装 nginx conf/vhost/test.conf   upstream admin { server 127.0.0.1:8080; }   server {                 listen       80; &
  • 设计模式--工厂模式 kerryg 设计模式
    工厂方式模式分为三种：   1、普通工厂模式：建立一个工厂类，对实现了同一个接口的一些类进行实例的创建。   2、多个工厂方法的模式：就是对普通工厂方法模式的改进，在普通工厂方法模式中，如果传递的字符串出错，则不能正确创建对象，而多个工厂方法模式就是提供多个工厂方法，分别创建对象。   3、静态工厂方法模式：就是将上面的多个工厂方法模式里的方法置为静态，
  • Spring InitializingBean/init-method和DisposableBean/destroy-method mx_xiehd javaspringbeanxml
    1.initializingBean/init-method 实现org.springframework.beans.factory.InitializingBean接口允许一个bean在它的所有必须属性被BeanFactory设置后，来执行初始化的工作，InitialzingBean仅仅指定了一个方法。 通常InitializingBean接口的使用是能够被避免的，（不鼓励使用，因为没有必要
  • 解决Centos下vim粘贴内容格式混乱问题 qindongliang1922 centosvim
    有时候，我们在向vim打开的一个xml，或者任意文件中，拷贝粘贴的代码时，格式莫名其毛的就混乱了，然后自己一个个再重新，把格式排列好，非常耗时，而且很不爽，那么有没有办法避免呢？ 答案是肯定的，设置下缩进格式就可以了，非常简单： 在用户的根目录下 直接vi  ~/.vimrc文件 然后将set pastetoggle=<F9> 写入这个文件中，保存退出，重新登录，
  • netty大并发请求问题 tianzhihehe netty
    多线程并发使用同一个channel java.nio.BufferOverflowException: null at java.nio.HeapByteBuffer.put(HeapByteBuffer.java:183) ~[na:1.7.0_60-ea] at java.nio.ByteBuffer.put(ByteBuffer.java:832) ~[na:1.7.0_60-ea]
  • Hadoop NameNode单点问题解决方案之一 AvatarNode wyz2009107220 NameNode
    我们遇到的情况 Hadoop NameNode存在单点问题。这个问题会影响分布式平台24*7运行。先说说我们的情况吧。 我们的团队负责管理一个1200节点的集群(总大小12PB)，目前是运行版本为Hadoop 0.20，transaction logs写入一个共享的NFS filer(注：NetApp NFS Filer)。 经常遇到需要中断服务的问题是给hadoop打补丁。 DataNod
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他