文章目录
一、理解 vuex
1. 什么是 vuex？
概念：专门在 Vue 中实现集中式状态（数据）管理的一个 Vue 插件，对 vue 应用中多个组件的共享状态进行集中式管理（读 / 写），也是一种组件间的通信方式，且适用于任意组件间通信。
2. 什么时候使用 vuex？
- 多个组件依赖于同一个状态
- 来自不同组件的行为需要变更同一状态
二、求和案例（纯vue版）
- 第一个下拉栏控制每次加或减的数值。
- 加一
- 减一
- 当和为奇数时再加
- 等一等再加
Count.vue
<template>
<div>
<h2>当前求和为：{
{
sum}}</h2>
<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: "myCount",
data(){
return{
n:1, //用户选择的数字
sum: 0 //当前的和
}
},
methods:{
increment(){
this.sum += this.n
},
decrement(){
this.sum -= this.n
},
incrementOdd(){
if(this.sum % 2){
this.sum += this.n
}
},
incrementWait(){
setTimeout(()=>{
this.sum += this.n
},500)
}
}
};
</script>
<style scoped>
button{
margin-left: 5px;
}
</style>
App.vue
<template>
<div>
<Count/>
</div>
</template>
<script>
// 引入组件
import Count from "./components/Count.vue";
export default {
name: "App",
components: {
Count },
};
</script>
三、vuex 工作原理图
1. 理解
- Vue Components：看作顾客
- Actions：看作点餐服务员
- Mutations：看作后厨厨师
- State：看作上来的菜
Actions：可以不经过它，它可以连接后端的一些接口。
四、搭建 vuex 环境
1. 安装 vuex
终端键入命令：
npm i vuex@3
对应的是 vue2.x 版本
2. 创建文件
在 src 文件下创建文件：
src/store/index.js
// 该文件用于创建Vuex中最为核心的store
// 引入vue核心库
import Vue from 'vue'
// 引入Vuex
import Vuex from 'vuex'
// 应用Vuex插件
Vue.use(Vuex)
// 准备actions——用于响应组件中的动作
const actions = {
}
// 准备mutations——用于修改state中的数据（state）
const mutations = {
}
// 准备state——用于存储具体的数据
const state = {
}
// 创建并暴露store
export default new Vuex.Store({
actions,
mutations,
state
})
在
main.js中创建vm时传入store配置项。
// 引入 Vue
import Vue from 'vue'
// 引入 App
import App from './App.vue'
// 引入 store
import store from './store'
// 关闭 vue 的生产提示
Vue.config.production = false
// 使用插件
//创建 vm
new Vue({
el:'#app',
render: h => h(App),
store
})
五、求和案例（vuex版）
Count.vue
- 在
Count.vue的 methods 中配置方法。- 简单的逻辑，直接在 methods 中
this.$store.commit('方法', 数据)。（此处的方法为index.js中 mutations 中配置的方法）- 复杂的逻辑，通过在 methods 中
this.$store.dispatch('方法', 数据)。（此处的方法为index.js中 actions 中配置的方法）- 页面呈现时的模板语法：
{ {$store.state.sum}}
<template>
<div>
<h2>当前求和为：{
{
$store.state.sum}}</h2>
<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="sub">-</button>
<button @click="addOdd">当前求和为奇数再加</button>
<button @click="addWait">等一等再加</button>
</div>
</template>
<script>
export default {
name: "myCount",
data(){
return{
n:1, //用户选择的数字
sum: 0 //当前的和
}
},
methods:{
add(){
this.$store.commit("ADD", this.n);
},
sub(){
this.$store.commit("SUB", this.n);
},
addOdd(){
this.$store.dispatch("addOdd", this.n);
},
addWait(){
this.$store.dispatch("addWait", this.n);
}
}
};
</script>
<style scoped>
button{
margin-left: 5px;
}
</style>
index.js
- 在
state中准备用于存储的数据sum。- 在
mutations中准备用于修改 state 中数据的函数ADD和SUB。（注意配置在 mutations 中的函数名一般大写）。- 在
actions中准备用于响应组件的函数addOdd和addWait。
// 该文件用于创建Vuex中最为核心的store
// 引入vue核心库
import Vue from 'vue'
// 引入Vuex
import Vuex from 'vuex'
// 应用Vuex插件
Vue.use(Vuex)
// 准备actions——用于响应组件中的动作
const actions = {
addOdd(context, value){
console.log('actions中的addOdd被调用了');
if(context.state.sum % 2){
context.commit('ADD',value)
}
},
addWait(context, value){
console.log('actions中的addWait被调用了');
setTimeout(()=>{
context.commit('ADD', value)
},500)
}
}
// 准备mutations——用于修改state中的数据（state）
const mutations = {
ADD(state, value){
console.log('mutations中的ADD被调用了',state, value);
state.sum += value
},
SUB(state, value){
console.log('mutations中的SUB被调用了',state, value);
state.sum -= value
}
}
// 准备state——用于存储具体的数据
const state = {
sum: 0 //当前的和
}
// 创建并暴露store
export default new Vuex.Store({
actions,
mutations,
state
})
vuex求和展示
六、vuex 的基本使用
1. 步骤
./store/index.js
- 初始化数据
- 配置 actions
- 配置 mutations：里面的函数名一般大写
- 操作文件 index.js
// 引入Vue核心库
import Vue from 'vue'
// 引入Vuex
import Vuex from 'vuex'
// 引用Vuex
Vue.use(Vuex)
const actions = {
// 响应组件中加的动作
add(context, value){
context.commit('ADD', value)
}
}
const mutations = {
// 执行加
ADD(state, value){
state.sum += value
}
}
// 初始化数据
const state = {
sum: 0
}
// 创建并暴露
export default new Vuex.Store({
actions,
mutations,
state
})
2. 组件中读取 vuex 中的数据
在组件的模板里面读取不需要加
this，在组件的 JS 里面写需要加this。
$store.state.sum
3. 组件中修改 vuex 中的数据
经过 actions 到 mutations 用
dispatch。
$store.dispatch('actions中的方法名', 数据)
直接到 mutations 用
commit。
$store.commit('mutations中的方法名', 数据)
注意：若没有网络请求或其他业务逻辑，组件中也可以越过 actions，即不写 dispatch，直接编写 commit。
七、getters 的使用
1. 概念
当 state 中的数据需要经过加工后再使用时，可以使用 getters 加工。（逻辑较为复杂时使用，可以被多个组件复用）。
2. 在 .store/index.js 中追加 getters 配置
.....
const getters = {
bigSum(state) {
return state.sum * 10
}
}
.....
export dafault new Vuex.Store({
.....
getters
})
3. 实例：数字扩大 10 倍
store.js
- 在该文件下追加配置
.....
const getters = {
bigSum(state) {
return state.sum * 10
}
}
.....
export dafault new Vuex.Store({
.....
getters
})
Count.vue
- 添加模板字符串，在组件中读取数据
$store.getters.bigSum，其余不变
<h3>当前求和放大10倍：{
{
$store.getters.bigSum}}</h3>
八、vuex 与 vue 的类比
- vuex 中的
state相当于 vue 中的data。- vuex 中的
mutations相当于 vue 中的methods。- vuex 中的
getters相当于 vue 中的computed。- vuex 中的
actions相当于 vue 中的methods- 注意：同步方法写在 mutations，异步写在 actions 里。
不积跬步无以至千里 不积小流无以成江海
点个关注不迷路（持续更新中…）