1.定义
1.vuex是什么:
专门在Vue中实现集中式状态(数据)管理的一个Vue插件，对vue应用中多个组件的共享状态进行集中式的管理(读/写),也是一种组件间通信的方式，且适用于任意组件间通信
2.什么时候使用Vuex
? 1.多个组件以来同一状态
? 2.来自不同组件的行为需要变更同一状态
3.Vuex工作原理图
2.vuex核心概念和API
1.state
1.vuex管理的状态对象(存放数据的对象)
2.它应该时唯一的
3.示例代码:
const state = {
// key:value
}
2.actions
1.值为一个对象，包含多个响应用户动作的回调函数
2.通过commit()来触发mutation中函数的调用，间接更新state
3.示例代码:
const actions = {
//函数
}
3.mutations
1.值是一个对象，包含多个直接更新state的方法
2.谁能调用mutations中的方法？如何让调用？
? 在action中使用:**commit(‘对应的mutations方法名’)**触发
3.mutations中方法的特点：不能写异步代码、只能单纯的操作state
4.示例代码:
const mutations = {
//函数
}
3.vuex使用流程
1.下载vuex
npm i vuex
2.创建store.js用于导入并定义Vuex
? 新建store文件夹，添加index.js文件，并定义相关方法
//该文件用于创建Vuex中最核心的store
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
Vue.use(Vuex)
//准备actions--用于响应组件中的动作
const actions = {
}
//准备mutations--用于操作数据(state)
const mutations = {
}
//准备state--用于存储数据
const state = {
}
//创建并暴露store
export default new Vuex.Store({
actions,
mutations,
state
})
? 3.在vue的入口文件main.js中注册vuex
import Vue from 'vue'
import App from './App.vue'
import store from './store'
Vue.config.productionTip = false
new Vue({
router,
render: h => h(App),
store,//注册vuex
beforeCreate(){
//将事件总线挂载在Vue实例上
Vue.prototype.$bus = this
}
}).$mount('#app')
4.对于不需要向后端请求数据的情况，可以跳过dispatch方法，直接调用commit方法(跳过actions过程，直接来到mutations)，流程:
? this.$store.commit(‘Add’,this.n) ==> state.count += value
对于需要向后端请求数据的情况，需要在actions中向后端发起请求获得数据，流程:
? this.$store.commit(‘Add’) ==> context.commit(‘AddOdd’,value) ==> state.count += value
5.渲染数据
? 在组件中使用通配符{{$store.state.xxx}}获取数据
4.示例
案例:点击按钮对数字进行各种操作
我们将求和之后的数字定义为count，存入vuex的临时组件中，每次进行操作从原组件中调用vuex的api，最终完成求和的计算
Count.vue组件:
<div >
<h1>当前求和为:{{$store.state.count}}</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="reduce">-</button>
<button @click="addOdd">当前求和为奇数再加</button>
<button @click="addWait">等一等再加</button>
</div>
export default {
data(){
return{
n:1,//选择框中选择的数字
}
},
methods:{
add(){
this.$store.commit('Add',this.n)
},
reduce(){
this.$store.commit('Reduce',this.n)
},
addOdd(){
this.$store.dispatch('addOdd',this.n)
},
addWait(){
this.$store.dispatch('addWait',this.n)
}
}
}
store中index.js
//该文件用于创建Vuex中最核心的store
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
Vue.use(Vuex)
//准备actions--用于响应组件中的动作
const actions = {
addOdd(context,value){
if(context.state.count % 2){
context.commit('AddOdd',value)
}
},
addWait(context,value){
setTimeout(()=>{
context.commit('AddWait',value)
},1000)
},
}
//准备mutations--用于操作数据(state)
const mutations = {
Add(state,value){
state.count += value
},
Reduce(state,value){
state.count -= value
},
AddOdd(state,value){
state.count += value
},
AddWait(state,value){
state.count += value
}
}
//准备state--用于存储数据
const state = {
count:1
}
//创建并暴露store
export default new Vuex.Store({
actions,
mutations,
state
})
效果
