提示:该文章为笔者的个人笔记并不是权威,如有错误,谢谢指出。
vuex
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。也是一种组件通信方式,使用于任意组件之间。
搭建vuex环境
安装vuex库:npm i vuex@3
创建文件:src/store/index.js
// 该文件用于创建Vuex中最核心的store
import Vue from 'vue'
import Vuex from 'vuex'
// 使用vuex插件
// 在index.js中使用,主要是为了避免在main.js中使用该插件出现
// 必须先使用在引入的问题
Vue.use(Vuex)
// 准备action--用于响应组件中的动作
const actions = {}
// 准备mutations--用于操作数据(state)
const mutations = {}
// 准备state--用于存储数据
const state = {}
// 创建并暴露store
export default new Vuex.Store({
actions,
mutations,
state
})
在main.js中创建vm时传入store配置项
// 引入vue
import Vue from 'vue'
import App from './App.vue'
import store from './store'
Vue.config.productionTip = false
const vm = new Vue({
el: '#app',
render: h => h(App),
store
})
初始化数据state,配置actions、mutations,操作文件store.js
组件中读取vuex中的数据:$store.state.sum
组件中修改vuex中的数据:$store.dispatch('action中的方法名',数据) 或 $store.commit('mutations中的方法名',数据)
<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="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() {
this.$store.commit('ADD', this.n)
},
decrement() {
this.$store.commit('MINUS', this.n)
},
incrementOdd() {
this.$store.dispatch('addOdd', this.n)
},
incrementWait() {
this.$store.dispatch('addWaite', this.n)
}
}
}
</script>
<style>
button {
margin: 5px;
}
</style>
// 该文件用于创建Vuex中最核心的store
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
// 准备action--用于响应组件中的动作
const actions = {
add(context, value) {
context.commit('ADD', value)
},
minus(context, value) {
context.commit('MINUS', value)
},
addOdd(context, value) {
if(context.state.sum % 2 == 0) {
context.commit('ADD', value)
}
},
addWaite(context, value) {
setTimeout(() => {
context.commit('ADD', value)
}, 500);
}
}
// 准备mutations--用于操作数据(state)
const mutations = {
ADD(state, value) {
state.sum += value
},
MINUS(state, value) {
state.sum -= value
}
}
// 准备state--用于存储数据
const state = {
sum: 0,
}
// 创建并暴露store
export default new Vuex.Store({
actions,
mutations,
state
})
四种map方法
- mapState方法:用于帮助我们映射state中的数据
- mapGetters方法:用于帮助我们映射getters中的数据
- mapActions方法:用于帮助我们生成与actions对话的方法,即:包含$store.dispatch(xxx)的函数
- 4. mapMutations方法:用于帮助我们生成与mutations对话的方法,即:包含$store.commit(xxx)的函数
<template>
<div>
<h1>当前求和为{{sum}}</h1>
<h3>放大10倍为{{bigSum}}</h3>
<h3>我在{{school}}学习{{subject}}</h3>
<h3>下方总人数为{{personList.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="increment(n)">+</button>
<button @click="decrement(n)">-</button>
<button @click="incrementOdd(n)">奇数加</button>
<button @click="incrementWait(n)">等等加</button>
</div>
</template>
<script>
import {mapState,mapGetters,mapActions,mapMutations} from 'vuex'
export default {
name: 'Count',
data() {
return {
n: 1,
}
},
computed: {
// 使用对象展开运算符将此对象混入到外部对象中
// 对象写法
// ...mapState({sum:'sum',school:'school',subject:'subject'}),
// 数组写法
...mapState(['sum','school','subject','personList']),
// ...mapGetters({bigSum:'bigSum'}),
...mapGetters(['bigSum']),
},
methods: {
...mapMutations({increment:'ADD',decrement:'MINUS'}),
...mapActions({incrementOdd:'addOdd',incrementWait:'addWaite'})
/* increment() {
this.$store.commit('ADD', this.n)
},
decrement() {
this.$store.commit('MINUS', this.n)
}, */
/* incrementOdd() {
this.$store.dispatch('addOdd', this.n)
},
incrementWait() {
this.$store.dispatch('addWaite', this.n)
} */
}
}
</script>
<style>
button {
margin: 5px;
}
</style>