1.什么是vuex
- Vuex是一个专门为Vue.js应用程序开发的状态管理模式,它由五部分组成
- 分别是:state,actions,mutations,getters,modules
2.vuex由五部分组成
- state:存储状态(变量)
- actions: 异步操作。在组件中使用是$store.dispath(’’)
- moduels:store 的子模块,为了开发大型项目,方便状态管理而使用的
- mutations : 修 改 状 态 , 并 且 是 同 步 的 。 在 组 件 中 使 用
$store.commit(’’,params)。这个和我们组件中的自定义事件类似 - getters:对数据获取之前的再次编译,可以理解为 state 的计算属性。我们在组件中使用 $sotre.getters.fun()
3.高级用法----数据持久化
问题:存储在vuex中的状态,刷新页面,会丢失
为了解决刷新页面数据丢失,才有了数据持久化
最简单的做法就是利用插件vuex-persistedState
1.安装
cnpm install vuex-persistedState -S
* -S 是--save的简写,意为:把插件安装到dependencies(生产环境依赖)中
* -D是--save-dev的简写,意为:把插件安装到devDependencies(开发环境依赖)中
4.高级用法----模块化管理数据
1.什么时候需要用到模块管理vuex数据。
* 项目庞大,数据信息量特别大的时候,我们可以考虑分模块形式管理数据,比如user模块管理用户信息数据,cart模块管理购物车数据,shop模块管理商品信息数据。
import vue from 'vue'
import Vuex from 'vuex'
Vue.use(vuex);
const state= ()=>{ token:''}
const actions = {
set_token({commit},val){
commit("to_token",val)
}
}
const mutations = {
to_token(state,val){
state.token=val;
}
}
const getters = {}
//user模块
let user = {
namespaced: true, //一定要开始命名空间。
state: { userid: 1234 },
actions: {
},
mutations: {
SET_USERID(state, val) {
state.userid = val;
}
},
getters: {
}
}
//购物车数据的模块
let cart = {
namespaced: true,
state: { userid: 567 },
actions: {
},
mutations: {
},
getters: {
}
}
const store = new Vuex.Store({
state,
mutations,
actions,
getters,
modules: {
user,
cart
},
plugins: [createPersistedState({
storage: sessionStorage,
key: "token"
})]//会自动保存创建的状态。刷新还在
})
export default store
3.高级用法----辅助函数(语法糖)
1.1. 有那几个辅助函数(4大金刚)
- mapState
- mapActions
- mapMutations
- mapGetters
<template>
<div id="">
{{ token }}
{{ token - x }}
</div>
</template>
<script>
import { mapActions, mapGetters, mapMutations, mapState } from 'vuex'
import {createNamespacedHelpers} from 'vuex'
const {mapState:mapStateUser,mapActions:mapActionUser,mapMutations:mapMutaionuser} = createNamespacedHelpers('user')
const {mapState:mapStateCart,mapActions:mapActionCart,mapMutations:mapMutaionCart} = createNamespacedHelpers('cart')
export default {
name: '',
data() {
return {}
},
computed: {
...mapState({
token: 'token'
}),
...mapGetters(['token-x']),
...mapSateUser(['userid']),
...mapStateCart({cartid:'userid'})
},
//生命周期 - 创建完成(访问当前this实例)
created() {
this.setToken('123456')
},
//生命周期 - 挂载完成(访问DOM元素)
mounted() {},
methods: {
...mapActions({
setToken: 'setToken'
}),
...mapMutations(['SET_TOKEN']),
...mapMutaionUser({
setId:"setToken"
})
}
}
</script>