1. 什么是vuex?
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式,它由五部分组成:
分别是:state,actions,mutations,getters,modules2. vuex由五部分组成
state: 数据
actions:可以包含异步操作
mutations: 唯一可以修改state数据的场所
getters: 类似于vue组件中的计算属性,对state数据进行计算(会被缓存)
modules:模块化管理store(仓库),每个模块拥有自己的 state、mutation、action、getter3. 如何使用
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 = {} let store = new Vuex.store({ state, actions, mutations, getters }) module.export=store;
home.vue
<template> <div> {{$store.state.token}} </div> </template> <script> export default={ name: 'Home', data() { return { tel: '', } }, created(){ //调用acionts中的方法 this.$store.dispatch('set_token',12345); //调用mutations中的方法 this.$store.commit('to_token',123456) } } <script>
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模块管理商品信息数据。
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
6. 高级用法----- 辅助函数(语法糖)
1. 有那几个辅助函数(4大金刚)
mapState,mapActions,mapMutations,mapGetters
2. 辅助函数可以把vuex中的数据和方法映射到vue组件中。达到简化操作的目的3. 如何使用
home.vue
<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>