一、Vuex是什么?
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。
二、它由五部分组成:
state: 数据
actions:可以包含异步操作
mutations: 唯一可以修改state数据的场所
getters: 类似于vue组件中的计算属性,对state数据进行计算(会被缓存)
modules:模块化管理store(仓库),每个模块拥有自己的 state、mutation、action、getter
3、使用方法
在跟目录下创建一个store文件夹,里面创建一个index.js文件,
import vue from 'vue'
import Vuex from 'vuex'
Vue.use(vuex);
const state= ()=>{ token:''}
const mutations = {
to_token(state,val){
state.token=val;
}
}
const actions = {
set_token({commit},val){
commit("to_token",val)
}
}
const getters = {}
let store = new Vuex.store({
state,
actions,
mutations,
getters
})
module.export=store;
在home.vue里面的使用,
//调用acionts中的方法
this.$store.dispatch('set_token',12345);
//调用mutations中的方法
this.$store.commit('to_token',123456)
4.高级语法------数据持久化
问题:存储在vuex中的状态,刷新页面,会丢失。
为了解决刷新页面数据丢失,才有了数据持久化。
最简单的做法就是利用插件 vuex-persistedState
。
1. 安装cnpm install vuex-persistedState -S
-S
是--save
的简写,意为:把插件安装到dependencies
(生产环境依赖)中-D
是--save-dev
的简写,意为:把插件安装到devDependencies
(开发环境依赖)中
2. 使用
import createPersistedState from 'vuex-persistedstate'
const store = new Vuex.Store({
state,
mutations,
actions,
getters,
plugins: [createPersistedState({
storage: sessionStorage,
key: "token"
})]//会自动保存创建的状态。刷新还在
})
注意:storage:存储方式。(sessionStorage,localStarage) key:定义本地存储中的key。
5、高级语法--模块化管理数据(modules)
1. 什么时候需要用到模块
管理vuex数据。
项目庞大,数据信息量特别大的时候,我们可以考虑分模块形式管理数据,比如user模块管理用户信息数据,cart模块管理购物车数据,shop模块管理商品信息数据。
在store里的index.js中使用,
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
在home.vue中,
获取user模块的`userid`
this.$store.state.user.userid
this.$store.commit("SET_USERID",12345)
6、高级用法----- 辅助函数(语法糖)
1. 几个辅助函数(4大金刚)mapState,mapActions,mapMutations,mapGetters
2. 辅助函数可以把vuex
中的数据和方法映射到vue组件
中。达到简化操作的目的
3、使用方法,
home.vue里,
3-1、先引入,
//普通引入
import { mapActions, mapGetters, mapMutations, mapState } from 'vuex';
//模块化管理后的引入
const {mapState:mapStateUser,mapActions:mapActionUser,mapMutations:mapMutaionuser} = createNamespacedHelpers('user')
const {mapState:mapStateCart,mapActions:mapActionCart,mapMutations:mapMutaionCart} = createNamespacedHelpers('cart')
3-2、映射
mapState和mapGetters映射在计算属性中,可以直接当成变量使用
//普通的映射
...mapState({
token: 'token'
}),
...mapGetters(['token-x']),
//模块化管理后的
...mapSateUser(['userid']),
...mapStateCart({cartid:'userid'})
mapActions和mapMutations映射在methods中,直接当做方法使用,
//普通的
...mapActions({
setToken: 'setToken'
}),
...mapMutations(['SET_TOKEN']),
//模块化后的
...mapMutaionUser({
setId:"setToken"
})