Vuex
1.概念
在Vue中实现集中式状态(数据)管理的一个Vue插件,对vue应用中多个组件的共享状态进行集中式的管理(读/写),
也是一种组件间通信的方式,且适用于任意组件间通信。
2.何时使用?
多个组件需要共享数据时
3.搭建vuex环境
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
})
2.在main.js中创建vm时传入store配置项
...
//引入store
import store from './store'
...
//创建vm
new Vue({
el:'#app',
render: h => h(App),
store
})
App.vue
<template>
<Count/>
</template>
<script>
import Count from './components/Count'
export default {
name:'App',
components:{Count},
/* mounted() {
console.log('App',this)
}, */
}
</script>
<style scoped>
</style>
main.js
// 引入Vue
import Vue from 'vue'
// 引入App
import App from './App.vue'
// 引入插件
import vueResource from 'vue-resource'
// 引入store
import store from './store'//因为文件名是index.js引入到这vue会自动选择index
// 关闭Vue生产提示
Vue.config.productionTip = false
// 使用插件
Vue.use(vueResource)
// 创建vm
new Vue({
el:"#app",
store,
render: h => h(App),
beforeCreate(){
Vue.prototype.$bus = this
}
})
index.js
// 该文件用于创建Vuex中最为核心的store
// 引入Vue
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
// 应用Vuex插件
Vue.use(Vuex)
// 准备actions--用于响应组件中的动作
const actions = {
/* jia:function(context,value){
console.log('actions中的jia被调用',context,value);
context.commit('JIA',value)
},
jian:function(context,value){
console.log('actions中的jian被调用',context,value);
context.commit('JIAN',value)
}, */
jiaOdd:function(context,value){
console.log('actions中的jiaOdd被调用',context,value);
if (context.state.sum % 2) {
context.commit('JIA',value)
}
},
jiaWait:function(context,value){
console.log('actions中的jiaWait被调用',context,value);
setTimeout(()=>{
context.commit('JIA',value)
},500)
},
}
// 准备mutations--用于操作数据(state)
const mutations = {
JIA(state,value){
// console.log('mutations中的JIA被调用了',state,value);
state.sum += value
},
JIAN(state,value){
// console.log('mutations中的JIAN被调用了',state,value);
state.sum -= value
}
}
// 准备state--用于存储数据
const state = {
sum:0//当前的和
}
// 创建store
const store = new Vuex.Store({
// 对象中的key和保存对应值的变量重名,可以简写
actions:actions,
mutations,
state
})
// 暴露store
export default store
/*
等同于
export default new Vuex.Store({
})
*/
搭建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.1og( '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
Count.vue
<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('JIA',this.n)
},
decrement(){
this.$store.commit('JIAN',this.n)
},
incrementOdd(){
this.$store.dispatch('jiaOdd',this.n)
},
incrementWait(){
this.$store.dispatch('jiaWait',this.n)
},
},
/* mounted() {
console.log('Count',this)
}, */
}
</script>
<style>
button{
margin-left: 5px;
}
</style>
getters
5.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
index.js中增加
// 准备getters--用于将state中的数据进行加工
const getters = {
bigSum(state){
return state.sum*10
}
}
// 创建store
const store = new Vuex.Store({
// 对象中的key和保存对应值的变量重名,可以简写
actions:actions,
mutations,
state,
getters
})