vue插件---状态管理vuex
单独安装或脚手架安装
特点：
- 集中式存储管理应用的所有组件的状态
- 保证状态以一种可预测的方式发生改变
- 简化vue组件间通讯
npm install vuex@next(4.0.2) --save安装vuex插件
npm i vuex-persistedstate -s安装vuex持久化存储插件
Vuex选项介绍：
- state页面状态管理容器对象。集中存储Vue components状态数据。
- mutations:状态改变操作方法，操作state中状态数据（是Vuex修改state的唯一推荐方法）。
由actions中的commit('mutation 名称’)来触发。（该方法只能进行同步操作）
- actions:操作行为处理模块,操作mutations中的方法。
由context中的commit()方法来触发mutation的调用，间接更新 state。（是唯一能执行mutation的方法。）
由组件中的$store.dispatch('action 名称',data1)来触发。（该方法可进行异步操作）
- getters:state对象读取方法。Vue Components通过该方法获取全局state对象。
- namespaced命名空间，模块拆分后有模块名
- modules模块拆分后通过模块名引入
- Plugins[]集成插件
一、vuex状态管理基础（认识state、mutations、actions、getters、vuex持久化存储插件集成）
- 组件中获取值：$store.getters.getters中取的名字
（获取vuex数据最好用计算属性computed:{num(){return this.$store.getters.num}}）
- 组件中调用方法：this.$store.dispatch('actions中取的方法名',参数值)
mutations只能同步操作
actions保证数据单向数流操作方式,保存状态数据以预期方式改变。可以写异步代码，进行异步操作
Vuex数据存储在内存中，刷新页面数据会丢失。（可以保存在localstorage中持久化存储，也可下载vuex持久化存储插件）
1.创建一个story文件夹→index.js文件
index.js
import { createStore } from 'vuex'
import createPersistedState from 'vuex-persistedstate'
const store = createStore({
// 集成插件
plugins:[createPersistedState({
storage:sessionStorage,
key:'storekey'
})]
state: {//状态数据
count: 0
},
mutations: {//操作state状态。第一个参数:state对象，第二个参数：外部传入参数
PLUS(state) {//方法
// state.count = num
state.count++
},
CHS(state,num) {//传参
state.count = num
}
},
/**
* 定义操作mutations方法的方法
* 供外部组件调用
* $store.dispatch('chs')
* 1. 单向数流操作方式,保存状态数据以预期方式改变
* 2. actions 异步操作
* mutations 同步操作
*/
actions: {//操作mutations中的方法
// plus(context) {//方法
// context.commit('PLUS')
// }
plus({ commit }) {//解构
commit('PLUS')
},
chs({ commit },num) {//传参
commit('CHS',num)
}
},
getters: {//获取值，类似计算属性
num: (state) => { return state.count }
// num: state => state.count
}
})
export default store
2.main.js引入集成到vue
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
const app = createApp(App)
app.use(router)
app.use(store)
app.mount('#app')
3. ComA.vue
<template>
<div class="about">
<p>{{ $store.getters.num }}</p>
<button @click="change">加</button>
<button @click="csh">初始化</button>
</div>
</template>
<script>
export default {
components:{
ComB,
},
methods: {
change() {
this.$store.dispatch('plus')
},
csh() {
this.$store.dispatch('chs',110)
}
}
}
</script>
二·、map辅助函数
mapState、mapMutations不常用
组件中获取值：$store.getters.getters中取的名字
...mapGetters({计算属性名:’store中getters中的属性名’})//对象
...mapGetters([’store中getters中的属性名’])//数组（计算属性名和store中getters中的属性名相同时）
简化获取store状态值。在计算属性computed中使用。
组件中调用方法：this.$store.dispatch('actions中取的方法名',参数值)
...mapActions({})//对象
...mapActions([])//数组
在methods中使用。
1. story文件夹→index.js
import { createStore } from 'vuex'
const store = createStore({
state: {//状态数据
count: 0,
msg:’’
},
mutations: {//操作state状态。第一个参数:state对象，第二个参数：外部传入参数
PLUS(state) {//方法
// state.count = num
state.count++
}
},
actions: {//操作mutations中的方法
// plus(context) {//方法
// context.commit('PLUS')
// }
plus({ commit }) {//解构
commit('PLUS')
}
},
getters: {//获取值，类似计算属性
num: (state) => { return state.count },
msg: (state) => { return state.msg}
// num: state => state.count
}
})
export default store
2. ComA.vue
<template>
<div>
<p>{{ num }}</p>
<p>{{ msg }}</p>
<!--<button @click="change">加一</button>-->
<button @click="plus">加一</button>
</div>
</template>
<script>
import {mapGetters，mapActions} from 'vuex'
export default {
computed:{
// num(){
// return this.$store.getters.num
// },
//map辅助函数简化获取store状态值
// ...mapGetters({//对象
// num:'num'//计算属性名:’store中getters中的属性名’
// })
...mapGetters('num',’msg’])[//数组
},
methods: {
// change() {
// this.$store.dispatch('plus')
// },
// ...mapActions({
// change:'plus'
// })
...mapActions([
'plus'
])
}
}
</script>
三、vuex模块化（namespaced、modules）
组件中获取值：$store.getters[‘模块名/getters中取的名字’]
组件中调用方法：this.$store.dispatch('模块名/actions中取的方法名',参数值)
1. story文件夹→modeuls文件夹→user.js/cart.js
user.js
const user = {
namespaced: true, // 命名空间 $store.dispatch('user/saveUser')
state: {
userInfo: {
name:'jack',
age:18
},
},
mutations: {
SAVE_USER(state, _userInfo) {
state.userInfo = _userInfo
},
},
actions: {
saveUser({ commit }, _userInfo) {
commit('SAVE_USER', _userInfo)
},
},
getters: {
user: state => state.userInfo,
},
}
export default user
cart.js
const cart = {
namespaced: true,
state: {
count: 0,
message:'hello'
},
mutations: {
INIT(state,num){
state.count = num
},
PLUS(state) {
state.count++
},
MINUS(state) {
state.count--
},
},
/**
* 定义操作mutations方法的方法
*/
actions: {
// init(context,num){
// context.commit('INIT',num)
// },
init({commit},num){
// 获取商品详情数据代码
commit('INIT',num)
},
plus({ commit }) {
commit('PLUS')
},
minus({ commit }) {
commit('MINUS')
},
},
/**
* 组件获取状态数据
* 计算属性
*/
getters: {
// num:(state)=>{return state.count}
num: state => state.count,
msg: state=>state.message
},
}
export default cart
2. story文件夹→index.js
import { createStore } from 'vuex'
import cart from './modules/cart.js'
import user from './modules/user.js'
const store = createStore({
modules:{
cart,
user
}
export default store
3.ComA.vue
<template>
<div>
<p>{{ num }}</p>
<p>{{ msg }}</p>
<button @click="plus">加一</button>
<button @click="minus">减一</button>
<button @click="bindInit">初始化</button>
<button @click="saveUser({ name: 'rose', age: 22 })">确定</button>
</div>
</template>
<script>
import { mapActions } from 'vuex'
export default {
computed: {
num() {
return this.$store.getters['cart/num']
},
msg(){
return this.$store.getters['cart/msg']
}
},
methods: {
bindInit() {
this.$store.dispatch('cart/init', 100)
},
plus() {
this.$store.dispatch('cart/plus')
},
minus(){
this.$store.dispatch('cart/minus')
},
// saveUser(){
// const user = {name:'rose',age:28}
// this.$store.dispatch('user/saveUser',user)
// },
...mapActions({//辅助函数传参用对象，不能用数组
saveUser: 'user/saveUser'
})
},
}
</script>
