12-Vue技术栈之Vuex的使用

这篇具有很好参考价值的文章主要介绍了12-Vue技术栈之Vuex的使用。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

1、理解 vuex

1.1 vuex 是什么

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

1.2 什么时候使用 Vue

  1. 多个组件依赖于同一状态
  2. 来自不同组件的行为需要变更同一状态

简单来说就是多个组件需要共享数据时

1.3 图解两种方式实现数据共享

  • 使用全局事件总线实现多组件共享数据较为麻烦。

12-Vue技术栈之Vuex的使用

  • 使用Vuex实现多组件共享数据简便。

12-Vue技术栈之Vuex的使用

2、搭建vuex环境

2.1 下载vuex

npm i vuex

12-Vue技术栈之Vuex的使用

注:
如果执行npm i vuex默认安装的是vuex4版本,而vuex4版本只能在vue3里面使用,所以如果你用的是vue2需要指定安装vuex3的版本。

vue2里正确安装:

npm i vuex@3

2.2 配置文件

  1. 创建文件:src/store/index.js
//引入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
})
  1. main.js中创建vm时传入store配置项
......
//引入Vue
import Vue from 'vue'
//引入App
import App from './App.vue'
//引入store
import store from './store/index.js'
......

//创建vm
new Vue({
	el:'#app',
	render: h => h(App),
	store
})

3、基本使用

  • vuex工作原理图:

12-Vue技术栈之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,
})
  1. 组件中读取vuex中的数据:$store.state.sum

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

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

3.1 求和案例纯vue写法

  • 我们来用纯Vue写一个案例,在用vuex重新书写一遍,形成一个对比。

实现效果:

12-Vue技术栈之Vuex的使用
结构目录:
12-Vue技术栈之Vuex的使用

代码示例:
main 文件

import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
 new Vue({
  render: h => h(App),
}).$mount('#app')

App组件

<template>
  <Count/>
</template>

<script>
import Count from './components/Count'
export default {
  name:'App',
  components:{Count}
}
</script>

<style>

</style>

Count组件

<template>
  <div>
    <h1>当前求和为:{{ sum }}</h1>
    <select v-model.number="n">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
    </select>
    <button @click="add">+</button>
    <button @click="subtract">-</button>
    <button @click="addOdd">当前和为奇数再加</button>
    <button @click="addWait">等一等再加</button>
  </div>
</template>

<script>
export default {
  name: "Count",
  data() {
    return {
      n: 1, //选择数
      sum: 0, //求和数
    };
  },
  methods: {
    add() {
      this.sum += this.n;
    },
    subtract() {
      this.sum -= this.n;
    },
    addOdd() {
      if (this.sum % 2) {
        this.sum += this.n;
      }
    },
    addWait() {
      setTimeout(() => {
        this.sum += this.n;
      }, 500);
    },
  },
};
</script>

<style>
h1 {
  color: pink;
}
select {
  width: 50px;
  background: pink;
}
button {
  margin: 5px;
  padding: 5px 10px;
  background: pink;
  border: none;
  cursor: pointer;
}
</style>

3.2 求和案例vuex写法

实现效果:

12-Vue技术栈之Vuex的使用
结构目录:

12-Vue技术栈之Vuex的使用
main文件

import Vue from 'vue'
import App from './App.vue'
//引入store里面的index.js文件,vue里默认引入的就是index文件
import store from './store'
Vue.config.productionTip = false
const vm = new Vue({
  render: h => h(App),
  store //安装store
}).$mount('#app')
console.log(vm);

App组件

<template>
  <Count/>
</template>

<script>
import Count from './components/Count'
export default {
  name:'App',
  components:{Count}
}
</script>
<style>

</style>

Count组件

<template>
  <div>
    <h1>当前求和为:{{ $store.state.sum }}</h1>
    <select v-model.number="n">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
    </select>
    <button @click="add">+</button>
    <button @click="subtract">-</button>
    <button @click="addOdd">当前和为奇数再加</button>
    <button @click="addWait">等一等再加</button>
  </div>
</template>

<script>
export default {
  name: "Count",
  data() {
    return {
      n: 1, //选择数
    };
  },
  methods: {
    add() {
      this.$store.commit("ADD", this.n);
    },
    subtract() {
      this.$store.commit("SUBTRACT", this.n);
    },
    addOdd() {
      this.$store.dispatch("addOdd", this.n);
    },
    addWait() {
      this.$store.dispatch("addWait", this.n);
    },
  },
};
</script>

<style>
h1 {
  color: pink;
}
select {
  width: 50px;
  background: pink;
}
button {
  margin: 5px;
  padding: 5px 10px;
  background: pink;
  border: none;
  cursor: pointer;
}
</style>

store里面的index.js 文件

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

//准备actions对象——响应组件中用户的动作
const actions = {
	addOdd(context, value) {
		if (context.state.sum % 2) {
			context.commit('ADD', value)
		};
	},
	addWait(context, value) {
		setTimeout(() => {
			context.commit('ADD', value)
		}, 500);
	}
}
//准备mutations对象——修改state中的数据
const mutations = {
	ADD(context, value) {
		context.sum += value
	},
	SUBTRACT(context, value) {
		context.sum -= value
	},

}
//准备state对象——保存具体的数据
const state = {
	sum: 0, //求和数
}

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

4、getters的使用

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

  2. store.js中追加getters配置

    ......
    
    const getters = {
    	bigSum(state){
    		return state.sum * 10
    		//靠返回值
    	}
    }
    
    //创建并暴露store
    export default new Vuex.Store({
    	......
    	getters
    })
    
  3. 组件中读取数据:$store.getters.bigSum

5、四个map方法的使用

  1. mapState方法:用于帮助我们映射state中的数据为计算属性
computed: {
    //借助mapState生成计算属性:sum、school、subject(对象写法)
     ...mapState({sum:'sum',school:'school',subject:'subject'}),
         
    //借助mapState生成计算属性:sum、school、subject(数组写法)
    ...mapState(['sum','school','subject']),
},
  1. mapGetters方法:用于帮助我们映射getters中的数据为计算属性
computed: {
    //借助mapGetters生成计算属性:bigSum(对象写法)
    ...mapGetters({bigSum:'bigSum'}),

    //借助mapGetters生成计算属性:bigSum(数组写法)
    ...mapGetters(['bigSum'])
},
  1. mapActions方法:用于帮助我们生成与actions对话的方法,即:包含$store.dispatch(xxx)的函数
methods:{
    //靠mapActions生成:incrementOdd、incrementWait(对象形式)
    ...mapActions({incrementOdd:'jiaOdd',incrementWait:'jiaWait'})

    //靠mapActions生成:incrementOdd、incrementWait(数组形式)
    ...mapActions(['jiaOdd','jiaWait'])
}
  1. mapMutations方法:用于帮助我们生成与mutations对话的方法,即:包含$store.commit(xxx)的函数
methods:{
    //靠mapActions生成:increment、decrement(对象形式)
    ...mapMutations({increment:'JIA',decrement:'JIAN'}),
    
    //靠mapMutations生成:JIA、JIAN(对象形式)
    ...mapMutations(['JIA','JIAN']),
}

备注:在四个方法使用时,若需要传递参数需要:在模板中绑定事件时传递好参数,否则参数是事件对象。

5.1 求和案例

  • 我们将上面的求和案例利用这些方法进行改进一下:
  • 其他文件照常,只改变store里面的index.jsCount组件
    index.js文件
//引入Vue核心库
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
//应用Vuex插件
Vue.use(Vuex)

//准备actions对象——响应组件中用户的动作
const actions = {
	/* add(context, value) {
		context.commit('ADD', value)
	},
	subtract(context, value) {
		context.commit('SUBTRACT', value)
	}, */
	addOdd(context, value) {
		if (context.state.sum % 2) {
			context.commit('ADD', value)
		};
	},
	addWait(context, value) {
		setTimeout(() => {
			context.commit('ADD', value)
		}, 500);
	}
}
//准备mutations对象——修改state中的数据
const mutations = {
	ADD(context, value) {
		context.sum += value
	},
	SUBTRACT(context, value) {
		context.sum -= value
	},

}
//准备state对象——保存具体的数据
const state = {
	sum: 0, //求和数
	school:'哔站',
	subject:'前端'
}
// 对state对象里的数据进行加工
const getters = {
	bigSum(state) {
		return state.sum * 10
	}
}

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

Count组件

<template>
  <div>
    <h1>当前求和为:{{ sum }}</h1>
    <h3>放大十倍后的和为:{{ bigSum }}</h3>
    <h3>我在{{ school }}学{{ subject }}</h3>

    <select v-model.number="n">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
    </select>
    <button @click="add(n)">+</button>
    <button @click="subtract(n)">-</button>
    <button @click="addOdd(n)">当前和为奇数再加</button>
    <button @click="addWait(n)">等一等再加</button>
  </div>
</template>

<script>
// 导入4个map方法
import { mapState, mapGetters, mapMutations, mapActions } from "vuex";
export default {
  name: "Count",
  data() {
    return {
      n: 1, //选择数
    };
  },
  computed: {
    //靠程序员自己亲自去写计算属性
    /* sum(){
				return this.$store.state.sum
			},
			school(){
				return this.$store.state.school
			},
			subject(){
				return this.$store.state.subject
			}, */

    //借助mapState生成计算属性,从state中读取数据。(对象写法)
    // ...mapState({ sum: "sum", school: "school", subject: "subject" }),
    //借助mapState生成计算属性,从state中读取数据。(数组写法)
    // 数组写法必须数据名和计算方法名一致
    ...mapState(["sum", "school", "subject"]),
    // ...............................
    //靠程序员自己亲自去写计算属性
    /* bigSum(){
				return this.$store.getters.bigSum
			}, */
    //借助mapGetters生成计算属性,从getters中读取数据。(对象写法)
    // ...mapGetters({bigSum:'bigSum'})
    //借助mapGetters生成计算属性,从getters中读取数据。(数组写法)
    ...mapGetters(["bigSum"]),
  },
  methods: {
    //程序员亲自写方法
    /*   add() {
      this.$store.commit("ADD", this.n);
    },
    subtract() {
      this.$store.commit("SUBTRACT", this.n);
    },
    addOdd() {
      this.$store.dispatch("addOdd", this.n);
    },
    addWait() {
      this.$store.dispatch("addWait", this.n);
    }, */

    //借助mapMutations生成对应的方法,方法中会调用commit去联系mutations(对象写法)
    ...mapMutations({ add: "ADD", subtract: "SUBTRACT" }), //必须在插值语法中传入实参,不然默认是event事件对象
    //借助mapMutations生成对应的方法,方法中会调用commit去联系mutations(数组写法)数组写法必须数据名和方法名一致,这里改了,上面调用的时候也要改。
    // ...mapMutations({ADD:'ADD',SUBTRACT:'SUBTRACT'})

    //借助mapActions生成对应的方法,方法中会调用dispatch去联系actions(对象写法)
    // ...mapActions({addOdd:'addOdd',addWait:'addWait'})
    //借助mapActions生成对应的方法,方法中会调用dispatch去联系actions(数组写法)
    ...mapActions(["addOdd", "addWait"]),
  },
};
</script>

<style>
h1,
h3 {
  color: pink;
}
select {
  width: 50px;
  background: pink;
}
button {
  margin: 5px;
  padding: 5px 10px;
  background: pink;
  border: none;
  cursor: pointer;
}
</style>

6、 模块化+命名空间

  • 目的:让代码更好维护,让多种数据分类更加明确。

  • 修改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
      }
    })
    
  • 开启命名空间后,组件中读取state数据:

    //方式一:自己直接读取
    this.$store.state.personAbout.list
    //方式二:借助mapState读取:
    ...mapState('countAbout',['sum','school','subject']),
    
  • 开启命名空间后,组件中读取getters数据:

    //方式一:自己直接读取
    this.$store.getters['personAbout/firstPersonName']
    //方式二:借助mapGetters读取:
    ...mapGetters('countAbout',['bigSum'])
    
  • 开启命名空间后,组件中调用dispatch

    //方式一:自己直接dispatch
    this.$store.dispatch('personAbout/addPersonWang',person)
    //方式二:借助mapActions:
    ...mapActions('countAbout',{incrementOdd:'jiaOdd',incrementWait:'jiaWait'})
    
  • 开启命名空间后,组件中调用commit

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

6.1求和案例改造

  • 实现效果:

12-Vue技术栈之Vuex的使用

  • 结构目录:

12-Vue技术栈之Vuex的使用
main文件

import Vue from 'vue'
import App from './App.vue'
import store from './store'

Vue.config.productionTip = false

 new Vue({
  render: h => h(App),
  store
}).$mount('#app')

App组件

<template>
  <div>
    <Count />
    <Person />
  </div>
</template>

<script>
import Count from "./components/Count";
import Person from "./components/Person";
export default {
  name: "App",
  components: { Count, Person },
};
</script>
<style>
</style>

Count组件使用4种map方法

<template>
  <div>
    <h1>当前求和为:{{ sum }}</h1>
    <h3>放大十倍后的和为:{{ bigSum }}</h3>
    <h3>我在{{ school }}学{{ subject }}</h3>
    <h3 style="color: red">Person组件的总人数是:{{ persons.length }}</h3>
    <select v-model.number="n">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
    </select>
    <button @click="add(n)">+</button>
    <button @click="subtract(n)">-</button>
    <button @click="addOdd(n)">当前和为奇数再加</button>
    <button @click="addWait(n)">等一等再加</button>
  </div>
</template>

<script>
// 导入4个map方法
import { mapState, mapGetters, mapMutations, mapActions } from "vuex";
export default {
  name: "Count",
  data() {
    return {
      n: 1,
    };
  },
  computed: {
    //借助mapState生成计算属性,从state中读取数据。(数组写法)
    ...mapState('CountOptions',["sum", "school", "subject"]),
    ...mapState('PersonOptions',["persons"]),
    //借助mapGetters生成计算属性,从getters中读取数据。(数组写法)
    ...mapGetters('CountOptions',["bigSum"]),
  },
  methods: {
    //借助mapMutations生成对应的方法,方法中会调用commit去联系mutations(对象写法)
    ...mapMutations('CountOptions',{ add: "ADD", subtract: "SUBTRACT" }),
    //借助mapActions生成对应的方法,方法中会调用dispatch去联系actions(对象写法)
    ...mapActions('CountOptions',["addOdd", "addWait"]),
  },
};
</script>

<style>
h1,
h3,
li {
  color: pink;
}
select {
  width: 50px;
  background: pink;
}
button {
  margin: 5px;
  padding: 5px 10px;
  background: pink;
  border: none;
  cursor: pointer;
}
</style>

Person组件不使用map方法,和上面的写法进行一个对比

<template>
  <div>
    <h1>人员列表</h1>
    <h3 style="color: red">Count组件求和为:{{ sum }}</h3>
    <h3>列表中第一个人的名字是:{{ firstPersonName }}</h3>
    <input type="text" placeholder="请输入名字" v-model="name" />
    <button @click="add">添加</button>
    <button @click="addZhang">添加一个姓张的人</button>
    <button @click="addPersonServer">随机添加一条语录</button>

    <ul>
      <li v-for="p in persons" :key="p.id">{{ p.name }}</li>
    </ul>
  </div>
</template>

<script>
import { nanoid } from "nanoid";
export default {
  name: "Person",
  data() {
    return {
      name: "",
    };
  },
  computed: {
    persons() {
      //   return this.$store.state.persons
      return this.$store.state.PersonOptions.persons;
    },
    sum() {
      return this.$store.state.CountOptions.sum;
    },
    firstPersonName() {
      return this.$store.getters["PersonOptions/firstPersonName"];
    },
  },
  methods: {
    add() {
      const personObj = { id: nanoid(), name: this.name };
      this.$store.commit("PersonOptions/PersonAdd", personObj);
    },
    addZhang() {
      const personObj = { id: nanoid(), name: this.name };
      this.$store.dispatch("PersonOptions/addZhang", personObj);
    },
    addPersonServer() {
        this.$store.dispatch('PersonOptions/addPersonServer')
    }
  },
  mounted() {
    console.log(this.$store);
  },
};
</script>

<style>
input::placeholder {
  color: pink;
}
input {
  border: 1px solid pink;
  padding: 5px;
}
</style>

store/index.js文件

//引入Vue核心库
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
import axios from 'axios'
import { nanoid } from 'nanoid'
//应用Vuex插件
Vue.use(Vuex)

const CountOptions = {
	namespaced: true,
	actions: {
		addOdd(context, value) {
			if (context.state.sum % 2) {
				context.commit('ADD', value)
			};
		},
		addWait(context, value) {
			setTimeout(() => {
				context.commit('ADD', value)
			}, 500);
		}
	},
	mutations: {
		ADD(state, value) {

			state.sum += value
		},
		SUBTRACT(state, value) {
			state.sum -= value
		},
	},
	state: {
		sum: 0, //求和数
		school: '哔站',
		subject: '前端',
	},
	getters: {
		bigSum(state) {
			return state.sum * 10
		}
	}
}
const PersonOptions = {
	namespaced: true,
	actions: {
		addZhang(context, value) {
			if (value.name.indexOf('张') === 0) {
				context.commit('PersonAdd', value)
			} else { alert('请输入姓张的人') }
		},
		addPersonServer(context) {
			axios({
				methods: 'get',
				url: 'https://api.uixsj.cn/hitokoto/get?type=social'
			}).then(response => {
				context.commit('PersonAdd', { id: nanoid(), name: response.data })
			}, error => { 
				alert(error.message)
			})
		}
	},
	mutations: {
		PersonAdd(state, value) {
			state.persons.unshift(value)
		}
	},
	state: {
		persons: [{ id: "001", name: '张三' }]
	},
	getters: {
		firstPersonName(state) {
			return state.persons[0].name
		}
	}
}

//创建并暴露store
export default new Vuex.Store({
	modules: {
		CountOptions,
		PersonOptions
	}
})

store/index.js文件进行拆分

  • 目录结构
    12-Vue技术栈之Vuex的使用
    index.js
//引入Vue核心库
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'


import CountOptions from './CountOptions'
import PersonOptions from './PersonOptions'
//应用Vuex插件
Vue.use(Vuex)

//创建并暴露store
export default new Vuex.Store({
	modules: {
		CountOptions,
		PersonOptions
	}
})

CountOptions.js

export default {
	namespaced: true,
	actions: {
		addOdd(context, value) {
			if (context.state.sum % 2) {
				context.commit('ADD', value)
			};
		},
		addWait(context, value) {
			setTimeout(() => {
				context.commit('ADD', value)
			}, 500);
		}
	},
	mutations: {
		ADD(state, value) {

			state.sum += value
		},
		SUBTRACT(state, value) {
			state.sum -= value
		},
	},
	state: {
		sum: 0, //求和数
		school: '哔站',
		subject: '前端',
	},
	getters: {
		bigSum(state) {
			return state.sum * 10
		}
	}
}

PersonOptions.js文章来源地址https://www.toymoban.com/news/detail-437621.html

import axios from 'axios'
import { nanoid } from 'nanoid'
export default {
    namespaced: true,
    actions: {
        addZhang(context, value) {
            if (value.name.indexOf('张') === 0) {
                context.commit('PersonAdd', value)
            } else { alert('请输入姓张的人') }
        },
        addPersonServer(context) {
            axios({
                methods: 'get',
                url: 'https://api.uixsj.cn/hitokoto/get?type=social'
            }).then(response => {
                context.commit('PersonAdd', { id: nanoid(), name: response.data })
            }, error => {
                alert(error.message)
            })
        }
    },
    mutations: {
        PersonAdd(state, value) {
            state.persons.unshift(value)
        }
    },
    state: {
        persons: [{ id: "001", name: '张三' }]
    },
    getters: {
        firstPersonName(state) {
            return state.persons[0].name
        }
    }
}

到了这里,关于12-Vue技术栈之Vuex的使用的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 10-Vue技术栈之脚手架配置代理(解决跨域问题)+ GitHub用户搜索案例

    ​ 在vue.config.js中添加如下配置: 说明: 优点:配置简单,请求资源时直接发给前端(8080)即可。 缺点:不能配置多个代理,不能灵活的控制请求是否走代理。 工作方式:若按照上述配置代理,当请求了前端不存在的资源时,那么该请求会转发给服务器 (优先匹配前端资

    2024年02月07日
    浏览(47)
  • python技术栈之单元测试中mock的使用

    mock测试就是在测试过程中,对于某些不容易构造或者不容易获取的对象,用一个虚拟的对象来创建以便测试的测试方法。 特别是开发过程中上下游未完成的工序导致当前无法测试,需要虚拟某些特定对象以便测试。 unittest是python内置的单元测试库,在做接口测试时,如果开

    2024年02月08日
    浏览(40)
  • Vue2向Vue3过度Vuex核心概念mutations

    1.定义mutations 2.格式说明 mutations是一个对象,对象中存放修改state的方法 3.组件中提交 mutations 4.练习 1.在mutations中定义个点击按钮进行 +5 的方法 2.在mutations中定义个点击按钮进行 改变title 的方法 3.在组件中调用mutations修改state中的值 5.总结 通过mutations修改state的步骤 1.定义

    2024年02月11日
    浏览(43)
  • 【Vuex状态管理】Vuex的基本使用;核心概念State、Getters、Mutations、Actions、Modules的基本使用

    在开发中,应用程序需要处理各种各样的数据,这些数据需要保存在应用程序中的某一个位置,对于这些数据的管理就称之为是 状态管理。 在前面是如何管理自己的状态呢? 在Vue开发中,使用组件化的开发方式; 而在组件中定义data或者在setup中返回使用的数据,这些数据称

    2024年02月07日
    浏览(47)
  • (二)深入理解Bluez协议栈之bluetooth socket通信

    目录 协议栈与内核通信: 协议栈提供的封装库: mgmt接口: hci接口:

    2023年04月26日
    浏览(29)
  • vuex是什么?怎么使用?哪种功能场景使用它?

    Vuex是Vue.js官方推荐的状态管理库,用于在Vue应用程序中管理和共享状态。它基于Flux架构和单向数据流的概念,将应用程序的状态集中管理,使得状态的变化更可追踪、更易于管理。Vuex提供了一个全局的状态树,以及一些用于修改状态的方法。 使用Vuex的一般步骤如下: 安装

    2024年01月17日
    浏览(58)
  • vue~vuex的使用

    Vuex 和本地存储(如 localStorage )以及 cookie 存储(如 document.cookie )之间有一些关系,但它们是不同的概念,用于不同的目的。 Vuex : Vuex 是 Vue.js 的官方状态管理库,用于在 Vue.js 应用程序中管理应用程序的全局状态。 Vuex 主要用于在前端应用程序中存储和管理各种状态,包

    2024年02月09日
    浏览(42)
  • vue3中使用vuex

    最近发现自己遗忘了一些东西,所以就去恶补了一下vuex的使用,结果还行还用有点变化的,vue3中使用vuex和vue2中完全不一样,vue3中必须使用vuex4 vuex官网 官方解释 Vuex 是一个专为 Vue.js 应用程序开发的 状态管理模式 + 库 。它采用集中式存储管理应用的所有组件的状态,并以

    2024年01月19日
    浏览(36)
  • 【Vue】使用 Vuex 作为状态管理

    Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式和库。它使用单一状态树,这意味着这个对象包含了全部的应用层级状态,并且以一种相对集中的方式存在。这也意味着,通常单个项目中只有一个 Vuex store。Vuex 的核心概念和功能包括: 状态(State) :Vuex 使用单一状态树

    2024年01月23日
    浏览(58)
  • 什么是域名转移和域名转移密码基本概念理解

    “域名转移”也叫“变更域名注册服务机构”、“域名转移注册商”或“域名转入”,是指将域名从现在的注册商转移到另外一家域名注册商,由其他的域名注册商为您的域名提供相关的服务。国际域名注册商是指由ICANN授权认证的国际域名顶级注册商;.CN域名注册商是指由

    2024年02月06日
    浏览(78)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包