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

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)

  • Node.js、Vue 和 React 的关系和区别 佐木宥轩 node.js
    Node.js、Vue和React是前端和后端开发中常用的技术，它们各自有不同的作用，但可以协同工作来构建现代化的Web应用。为了通俗易懂地理解它们的关系，我们可以用一个餐厅的比喻来说明。1.Node.js：厨房的后台Node.js是一个基于JavaScript的运行时环境，主要用于构建服务器端应用程序。它就像餐厅的厨房，负责处理数据和逻辑。作用：提供后端服务，比如处理数据库、用户认证、文件上传等
  • 使用Flask框架实现前后端交互，直接打开html页面无法显示后端传入的数据问题Access to XMLHttpRequest at ‘http://127.0.0.1:5000/***‘ from 小刘 同学 flaskpython后端
    出现CORS（跨源资源共享）问题是因为前端页面和Flask后端不在同一个源（即不同的端口或域名）。为了解决这个问题，可以在Flask中设置CORS头。你可以使用flask-cors这个库来简化配置。安装flask-cors首先，安装flask-cors：pipinstallflask-cors更新Flask应用然后，在你的Flask应用中引入并配置CORS：fromflaskimportFlask
  • 开发规范 ！！！525 springbootspringboot
    开发规范企业项目开发有2种开发模式：前后台混合开发和前后台分离开发。前后台混合开发顾名思义就是前台后台代码混在一起开发，如下图所示：这种开发模式有如下缺点：沟通成本高：后台人员发现前端有问题，需要找前端人员修改，前端修改成功，再交给后台人员使用分工不明确：后台开发人员需要开发后台代码，也需要开发部分前端代码。很难培养专业人才不便管理：所有的代码都在一个工程中难以维护：前端代码更新，和后台无关，但是
  • Restful风格 ！！！525 springbootrestful后端
    引言在前后端分离的开发模式中，前后端开发人员都需要根据提前定义好的接口文档，来进行前后端功能的开发。后端开发人员：必须严格遵守提供的接口文档进行后端功能开发（保障开发的功能可以和前端对接）而在前后端进行交互的时候，我们需要基于当前主流的REST风格的API接口进行交互。什么是REST风格呢?REST（RepresentationalStateTransfer），表述性状态转换，它是一种软件架构风格
  • nodejs后端ws与http结合共享一个服务器，前端websocket发送信息后端ws接收信息,使用Map定型数组设置ID cdcdhj nodejshttp服务器前端
    //服务端代码consthttp=require('node:http');constWebSocket=require('ws');constserver=http.createServer();//创建websocket服务constwss=newWebSocket.WebSocketServer({server});//创建定型数组constclients=newMap();wss.on('
  • TypeScript 中的类型推断：提升代码安全与开发效率
    TypeScript是JavaScript的超集，通过在代码中添加静态类型检查来提升代码的安全性和开发效率。在使用TypeScript时，理解和利用类型推断机制是至关重要的。类型推断可以减少显式类型注解的需求，从而提高代码的可读性和开发效率。本文将深入探讨TypeScript中的类型推断机制，常见的推断场景，以及如何在实际项目中有效利用这一特性。什么是类型推断？类型推断是指编译器自动推断出变量或表
  • vue3中的provide和inject实用案例之基于el-dialog的命令式弹框，直接一行js代码打开
    需求场景某些情况下，我们要使用一个弹框组件的时候一般都是这样使用：Thisisadialogimport{ElDialog}from'element-plus'import{ref}from"vue";constdialogVisible=ref(false)constopen=()=>{dialogVisible.value=true}也就是说，每次想要有一个弹框打开功能都需要引入ElDialo
  • 圈子交友app小程序公众号/圈子社群创建必须要注意的几个点
    技术选型与平台搭建技术选型：根据需求选择合适的开发技术和框架。例如，对于跨平台应用，可以考虑使用vue、uniapp等前端框架；后端则可以选择php等组合，以保证数据处理的效率和安全性。平台搭建：搭建稳定、易用、美观的App、小程序或公众号平台。注重用户体验，确保界面简洁、操作流畅。用户体验优化界面设计：注重UI/UX设计，确保界面美观、简洁、易用。这有助于提升用户的满意度和忠诚度。交互流程：优化
  • 深入解析Vue.js组件开发：从基础到进阶 冷夜雨. vue.js
    Vue.js作为一款渐进式的JavaScript框架，其独特的设计理念和易用性使得它在现代前端开发中占据了重要地位。Vue组件是Vue.js中最核心的组成部分，它是构建应用的基础单元，也是Vue项目模块化和重用的关键所在。在这篇文章中，我们将深入探讨Vue.js的组件开发，涵盖从基础到进阶的各个方面，包括组件的创建、通信、生命周期、性能优化等内容，帮助你掌握Vue组件开发的核心技巧。一、Vue组件
  • 基于JavaScript的网页设计案例分析：打造现代化、交互性强的网站体验 冷夜雨. javascript
    引言随着互联网的快速发展，网页设计的要求也在不断提升。从最初的静态页面到如今的动态、交互式网页，JavaScript作为一种重要的前端开发语言，已成为现代网页设计中不可或缺的一部分。它能够为网页带来更强的交互性、灵活性和动态效果，不仅提升用户体验，也能在设计过程中实现更复杂的功能。本文将通过一个具体的JavaScript网页设计案例，来展示如何利用JavaScript打造现代化、交互性强的网站，并
  • Vue 开发者的 React 实战指南：路由和导航篇
    作为Vue开发者，在迁移到React开发时，路由系统的差异是需要重点关注的部分。本文将从VueRouter的使用经验出发，详细介绍ReactRouter的使用方式和最佳实践。基础路由配置VueRouter配置在Vue中，我们通常这样配置路由：//router/index.jsimport{createRouter,createWebHistory}from'vue-router';importHo
  • 总结 JavaScript 中的变体函数调用方式 javascript前端
    JavaScript中函数调用有许多独特的变体方式，例如~function、-function等。这些变体不仅展现了JavaScript语言的灵活性，也可以在某些场景下让代码更加简洁。本文将通过示例代码和解析，来全面剖析这些特殊的函数调用方式及其返回值的区别。IIFE的基础：自执行函数在深入了解特殊调用方式之前，我们先来复习一下IIFE（ImmediatelyInvokedFunctionExpr
  • 基于微信开发的家政小程序源码预约上门|家政接单 小程序
    家政小程序是一个基于微信平台的应用程序，旨在为用户提供便捷的家政服务预约和管理功能。该小程序包含用户注册与登录、家政服务浏览与选择、预约下单、订单管理等功能模块。基于微信开发的家政小程序源码是一个相对复杂的项目，它涉及到前端页面设计、后端API交互以及业务逻辑处理等多个方面。源码及演示：j.yunzes.top/er一、开发环境及工具概述家政小程序的开发环境主要包括操作系统、开发工具、数据库、服务
  • 系统设计架构——互联网案例 大猩猩爱分享 java架构
    Netflix的技术栈移动和网络：Netflix采用Swift和Kotlin来构建原生移动应用。对于其Web应用程序，它使用React。前端/服务器通信：Netflix使用GraphQL。后端服务：Netflix依赖ZUUL、Eureka、SpringBoot框架和其他技术。数据库：Netflix使用EV缓存、Cassandra、CockroachDB和其他数据库。消息传递/流媒体：Netflix
  • 关于BFC和清除浮动详解
    近期总结回顾前端知识，对清楚浮动和BFC有了更深刻更细致的理解，先把总结的文档放在这里，后面有时间再增加解释。如有疑问或有误解的地方，欢迎评论指正！格式化上下文块级格式化上下文（BlockFormattingContext，BFC）概念BFC属于普通流，具有BFC特性的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且BFC具有普通容器所没有的一些特性。BFC的特性清
  • 【学术会议论文投稿】JavaScript在数据可视化领域的探索与实践 小周不想卷 艾思科蓝学术会议投稿javascript
    【ACM出版|EI快检索|高录用】2024年智能医疗与可穿戴智能设备国际学术会议（SHWID2024）_艾思科蓝_学术一站式服务平台更多学术会议请看学术会议-学术交流征稿-学术会议在线-艾思科蓝目录引言JavaScript可视化库概览D3.js基础入门1.引入D3.js2.绘制简单的条形图3.添加轴交互性与动画实际应用场景结论引言在数据驱动决策日益重要的今天，数据可视化成为连接数据与洞察的桥梁。J
  • 【学术会议论文投稿】前端框架巅峰对决：React、Vue与Angular的全面解析与实战指南 小周不想卷 艾思科蓝学术会议投稿前端框架
    【JPCS独立出版】第三届能源与动力工程国际学术会议（EPE2024）_艾思科蓝_学术一站式服务平台更多学术会议请看：https://ais.cn/u/nuyAF3引言在快速发展的前端技术领域，选择合适的框架或库对于项目的成功至关重要。React、Vue和Angular作为当前最流行的三大前端框架/库，各自拥有独特的优势和适用场景。本文将通过深入的文字解析和代码讲解，帮助开发者理解这三者的差异，并
  • java ssm基于微信小程序的面向企事业单位的项目申报评审系统（源码+文档+运行视频+讲解视频） QQ2279239102 SSM微信小程序微信小程序javaSSM开发语言vue.js
    文章目录系列文章目录目的前言一、详细视频演示二、项目部分实现截图三、技术栈后端框架SSM前端框架vueSSM框架详细介绍系统测试微信小程序介绍四、代码参考源码获取目的摘要：基于JavaSSM与微信小程序的项目申报评审系统，针对企事业单位项目管理痛点，提供一站式解决方案，提升工作效率与透明度。申报单位在微信小程序端按模板填写项目信息，包括项目背景、目标、预算等详细资料，上传相关附件。系统自动校验格式
  • Yarn 如何优化依赖安装的速度？
    引言在前端开发中，包管理器是必不可少的工具，用于管理项目的依赖包。Yarn是由Facebook推出的一个包管理器，作为npm的替代方案，它在性能、可靠性和安全性方面提供了显著提升。一个常见的问题是：Yarn如何优化依赖安装的速度？本文将专注于这个问题，深入分析Yarn的核心机制和优化策略。传统npm安装的瓶颈在理解Yarn的优化之前，先来看一下传统npm安装依赖的问题：串行安装早期版本的npm使用
  • TypeScript 的类型系统如何提升代码质量？
    引言在现代前端和后端开发中，代码质量的重要性毋庸置疑。良好的代码质量不仅能减少Bug，还能提升团队协作效率和项目的可维护性。而TypeScript的出现，为JavaScript引入了静态类型检查，成为提升代码质量的一大利器。本文将聚焦于TypeScript的类型系统，探讨它如何帮助开发者在开发阶段发现潜在问题、提升代码健壮性。类型系统的核心价值JavaScript是一门动态类型语言，这意味着变量的
  • Chrome DevTools 剖析：调试 JavaScript 异常
    引言ChromeDevTools是一款功能强大的开发者工具，广泛应用于前端开发，尤其是调试网页和Web应用的JavaScript代码。作为GoogleChrome浏览器的一部分，它为开发者提供了一整套调试、分析和优化网页性能的功能。本文将专注于ChromeDevTools中调试JavaScript异常的功能，并详细介绍如何使用它来有效捕获和解决JavaScript错误。1.JavaScript异常
  • [Python数据可视化] Plotly：交互式数据可视化的强大工具 William数据分析 pythonpython数据分析数据可视化
    引言：在数据分析和可视化的世界中，Plotly是一颗耀眼的明星。它是一个开源的交互式图表库，支持多种编程语言，包括Python、R和JavaScript。Plotly的强大之处在于它能够创建出既美观又具有高度交互性的图表，使得数据探索和分析变得更加直观和有趣。本文将详细介绍Plotly的功能，并通过实际示例展示其在数据可视化中的应用。Plotly的优势：交互性：Plotly图表具有丰富的交互功能，
  • vue2基础组件通信案例练习：把案例Todo-list改成使用全局事件总线
    @[toc]改动的地方注意点1：使用地方App和MyItem之间使用全局事件总线，之前方式是App传给MyList，然后MyList再传给MyItem，之前缺陷是MyList只作为传递着啥都不干，显得太绕圈，太多余。main.jsnewVue({el:'#app',render:h=>h(App),beforeCreate(){Vue.prototype.$bus=this},})App.vuem
  • 《进阶篇第9章》学习vuex知识点后练习：把求和案例改成vuex版代码
    @[toc]效果展示：注意点1：问题：如何实现“当前和为奇数再加”？答案：incrementOdd(){if(this.sum%2){this.sum+=this.n}}注意点2:问题：select下拉框默认为1时，点击加号没问题，但是下拉框选中为2时，n值变成字符串了，不应该是数字类型名吗？旧代码：无论设置value="1"还是value=1都无效当前求和为：{{sum}}123答案：因为没设置
  • MoonBit 双周报 Vol.58：原生后端支持、多行字符串插值、json.inspect 功能等多项关键特性取得显著进展！ 编程语言
    MoonBit更新MoonBit支持native后端Wasm-gc后端支持Js-string-builtinsproposal当通过编译选项-use-js-builtin-string开启使用Js-string-builtins之后，Moonbit面向wasm-gc后端时，会使用JavaScript中的字符串类型表示MoonBit中的字符串，这时生成的wasm可执行文件中将需要从JavaScrip
  • 5分钟内理解 .prototype 链 | 2024
    CSS技巧与案例详解vue2与vue3技巧合集VueUse源码解读在JavaScript的世界里,原型(prototype)系统是一个常被讨论但不易掌握的概念。作为JavaScript继承模型的基石,理解原型对于构建大型应用或进行对象操作至关重要。让我们一起探索这个迷人的话题,揭开原型系统的神秘面纱。什么是原型?在JavaScript中,每个对象都有一个内部属性[[Prototype]]。这个属性
  • vue3中用MutationObserver加hook方式实现视频不可拖拽功能&效能工具（六）一键提交git代码bat脚本
    github完整代码：https://github.com/shuirongshuifu/vue3-echarts5-example需求描述项目中有视频播放功能采取的是开源组件，西瓜视频的开源组件点击去官网xgplayer大致需求就是若视频没有播放完毕，就不允许拖拽跳着观看当然会有一个字段记录视频有没有播放完毕关于西瓜视频xgplayer的配置项使用，可以参照笔者之前的文章：https://seg
  • Vue3中使用hook实现按住Shift快速勾选el-table功能
    需求描述最近产品说，某个el-table要实现按住shift键快速勾选功能大概就是仿windows系统的文件shift按住选中功能反正就是尽可能多的让用户勾选方便用户快速勾选操作github完整代码：https://github.com/shuirongshuifu/vue3-echarts5-exampleWindows系统的功能效果图比如可以向前多选或者向后多选大家可以自己尝试一下自己实现的e
  • vue3 uiapp实现一个数字输入组件， 输入非数字会默认转成最小数 初遇你时动了情 vue3uniappjavascript前端vue.js
    实现一个数字输入组件用户输入字符串、汉字、字母等非数字，会默认转成最小数使用vue3最新语法defineModel-=max}"@click="handlePlus">+import{ref,toRefs,onMounted}from'vue'constmodel=defineModel()constprops=defineProps({min:{type:Number,default:0},ma
  • 面向企业级前端应用的开发框架 UI5 的发展简史介绍
    Python中的class体内定义方法时，如果没有显式地包含self参数，有时候依然可以被调用。这是一个非常有趣的话题，因为它涉及到对Python中类与对象之间关系的更深理解。要理解为什么这种情况下方法依然能够被调用，我们需要逐步拆解Python类的构造方式以及方法绑定的原理。
  • 遍历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其他