Vue —— Vuex
vuex 插件
- Actions 、Mutations 、State 都是对象 {} ，都由 store 管理
- 必须让所有 vc 看见 store
安装 vuex
-
npm i vuex@3 :
vue2 中只能用 vuex3 版本，vue3 中只能用 vuex4 版本
一、非模块化（ 组件少时 ）
- src 下建 store 文件夹 ，里面放 index.js
index.js
//引入Vue 和 Vuex;
import Vue from 'vue';
import Vuex from 'vuex';
//使用插件，必须放在这里
Vue.use(Vuex);
//准备 actions --- 用于响应组件中的动作
const actions = {};
//准备 mutations --- 用于操作数据
const mutations = {};
//准备 state --- 用于存储数据
const state = {};
//可以理解为计算属性
const getters = {}
//创建并导出 Store
export default new Vuex.Store({
actions,
mutations,
state,
getters
})
入口函数 main.js
//引入 store 仓库
import store from './store/index'
//创建vm
new Vue({
...,
//注册 store(同名可简写)，组件实例身上会多一个 $stroe 属性
store,
...
})
4 个批量生成代码函数
- import {mapState,mapGetters,mapMutations,mapActions} from 'vuex’
非模块化 案例
- Count.vue
<template>
<div>
<h1>当前求和为 ：{{sum}}h1>
<h2>当前求和放大10倍为 ：{{bigSum}}h2>
<h2>我在{{school}} ，学习{{subject}}h2>
<select v-model.number="n">
<option value="1">1option>
<option value="2">2option>
<option value="3">3option>
select>
<button @click="ADD(n)">+button>
<button @click="UNADD(n)">-button>
<button @click="addOdd(n)">当前求和为奇数再加button>
<button @click="addWait(n)">等一等再加button>
div>
template>
<script>
/* 引入 4 个批量生成代码函数，
数据 在 computed 里接收,
方法 在 methods 里接收 */
import {mapState,mapGetters,mapMutations,mapActions} from 'vuex'
export default{
name:'Count',
data(){
return{
n:1, // 用户选择的数字
}
},
computed:{
/* ...{x，x，x}表示把{x,x,x}里的元素拆开摆进computed对象里
对象写法：对象里不能直接套对象
...mapState({sum:'sum',school:'school',subject:'subject'})
数组写法：前提是生成的计算属性名与state属性名相同 */
...mapState(['sum','school','subject']),
...mapGetters(['bigSum'])
},
methods: {
//借助mapMutations 生成对应的方法，会调用 commit 去联系 Mutations
...mapMutations(['ADD','UNADD']),
//借助mapActions 生成对应的方法，会调用 dispatch 去联系 Actions
...mapActions(['addOdd','addWait']),
}
}
script>
<style scoped>
button{
margin-left: 5px;
}
style>
- index.js
//引入Vue 和 Vuex
import Vue from 'vue'
import Vuex from 'vuex'
//准备 actions --- 用于响应组件中的动作
const actions = {
addOdd(context,value){
if(context.state.sum % 2){
context.commit('ADD',value)
}
},
addWait(context,value){
setTimeout(()=>{
context.commit('ADD',value)
},500)
context.commit('ADDWAIT',value)
}
}
//准备 mutations --- 用于操作数据
const mutations = {
ADD(state,value){
state.sum += value
},
UNADD(state,value){
state.sum -= value
}
}
//准备 state --- 用于存储数据
const state = {
sum:0 , // 当前的和
school: '清华',
subject: '技术'
}
//准备 getters（可用可不用） --- 用于将 state 中的数据进行加工,相当于计算属性
const getters = {
bigSum(state){
return state.sum*10
}
}
//使用插件，必须放在这里
Vue.use(Vuex)
//创建并导出 Store
export default new Vuex.Store({
actions,
mutations,
state,
getters
})
入口函数 main.js
//引入 store
import store from './store/index'
//创建vm
new Vue({
...,
//配置store(同名可简写)
store,
...
})
———————————————————————————————————————————————————————————————
二、模块化（组件多时 ⇒ 小仓库）
-
src 下建 store 文件夹 ，建立 主仓库 index.js、以及小仓库们
-
小仓库/index.js
//home 模块的小仓库
const state = {}
const mutations = {}
const actions = {}
const getters = {}
export default {
state,
mutations,
actions,
getters
}
- 主仓库/index.js 引入小仓库
//引入 Vue 和 Vuex
import Vue from 'vue'
import Vuex from 'vuex'
//使用 vuex 插件
Vue.use(Vuex)
//引入小仓库
import home from './home'
import search from './search'
//对外暴露 store 类实例
export default new Vuex.Store({
//实现模块化开发存储数据
modules:{
home,
search
}
})
- 入口函数 main.js
//引入 store
import store from './store/index'
//创建vm
new Vue({
...,
//配置store(同名可简写)
store,
...
})