vuex总结

1. 什么是vuex?

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式,它由五部分组成:
分别是:state,actions,mutations,getters,modules
在这里插入图片描述

2. 有5部分组成

  • 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 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

  • 安装
    cnpm install vuex-persistedstate -S
    备注:

-S--save的简写,意为:把插件安装到dependencies(生产环境依赖)中
-D--save-dev的简写,意为:把插件安装到devDependencies(开发环境依赖)中

  • 使用
import createPersistedState from 'vuex-persistedstate'

const store = new Vuex.Store({
  state,
  mutations,
  actions,
  getters,
  plugins: [createPersistedState({
    storage: sessionStorage,
    key: "token"
  })]//会自动保存创建的状态。刷新还在
})
  • 参数

storage:存储方式。(sessionStorage,localStorage) key:定义本地存储中的key

5.高级语法-值 模块化管理数据 (modules)

  • 什么时候需要用到模块管理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
  • home.vue如何使用
获取user模块的`userid`
this.$store.state.user.userid
this.$store.commit("SET_USERID",12345)

6.高级用法-之 辅助函数(语法糖)

  • 有哪几个辅助函数(4大金刚)
    mapState,mapActions,mapMutations,mapGetters
  • 辅助函数可以把vuex中的数据和方法映射到vue组件中。达到简化操作的目的
  • 如何使用
    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']),
   ...mapStateUser(['userid']),
   ...mapStateCart({cartid:'userid'})
 },
 //生命周期 - 创建完成(访问当前this实例)
 created() {
   this.setToken('123456')
 },
 //生命周期 - 挂载完成(访问DOM元素)
 mounted() {},
 methods: {
   ...mapActions({
     setToken: 'setToken'
   }),
   ...mapMutations(['SET_TOKEN']),
   ...mapMutaionUser({
   setId:"setToken"
  })
 }
}
</script>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值