Vuex学习
1.概念
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态（数据）。Vuex 也集成到 Vue 的官方调试工具 devtools 。
简单来说，Vuex是在Vue中实现集中式状态（数据）管理的一个Vue插件，对vue应用中多个组件的共享状态进行集中式的管理（读/写），也是一种组件间通信的方式，且适用于任意组件间通信。
2.何时使用
当多个组件需要共享数据
- 多个组件依赖于同一状态
- 来自不同组件的行为需要变更同一状态
3. 原理图分析
接下来以一个函数add（参数为1），来说明Vuex的原理图。
（1）Satet：vuex 管理的状态对象（数据对象） ，它应该是唯一的。
（2） actions：为一个对象，包含多个响应用户动作的回调函数。
- 在组件中使用
$store.dispatch('对应的 action 回调名')触发actions中的回调 - 通过
commit( )来触发 mutation 中函数的调用, 间接更新 state。 - 可以包含异步代码（定时器, ajax 等等）
（3）mutations：是一个对象，包含多个直接更新 state 的方法
- 在 action 中使用
commit('对应的 mutations 方法名')触发 mutations 中的方法 -
不能写异步代码、只能单纯的操作 state
4.搭建vuex环境
1.执行npm i vuex@3安装 Vuex3（Vue2搭配Vuex3使用）
2.创建文件：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
})
3.在main.js中创建vm时传入store配置项
......
//引入store
import store from './store'
......
//创建vm
new Vue({
el:'#app',
render: h => h(App),
store
})
5. 基本使用
代码结构
Count.vue
（1）在每个组件和vm身上都会有$store.state属性，我们可以从中获得state状态中的sum。
（2）若没有网络请求或其他业务逻辑，组件中也可以越过actions，即不写dispatch，直接编写commit。
<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)
},
},
}
</script>
<style >
button{
margin-left: 5px;
}
</style>
index.js
mutations中的函数一般使用大写形式
//该文件用于创建Vuex中最为核心的store
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
//应用Vuex插件
Vue.use(Vuex)
//准备actions——用于响应组件中的动作
const actions = {
jia(context,value){
context.commit('JIA',value)
},
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,
})
App.vue
<template>
<div>
<Count/>
</div>
</template>
<script>
import Count from './components/Count'
export default {
name:'App',
components:{Count},
}
</script>
main.js
创建vm时配置store
//引入Vue
import Vue from 'vue'
//引入App
import App from './App.vue'
//引入store
import store from './store'
//关闭Vue的生产提示
Vue.config.productionTip = false
//创建vm
new Vue({
el:'#app',
render: h => h(App),
store,
})
效果
在 devtools可以观察到mutations 中的方法的调用。