zoukankan      html  css  js  c++  java
  • vuex 的使用

    vuex使用规则

    统一管理数据

    1.获取index文件定义的state

    vuex来存的数据什么时候还要结合缓存?
    项目跳外链的话vuex的数据都会消失,如果vuex存的数据不能及时再次获取,那么它需要缓存起来,以便再次给他复值

    定义变量的文件
    const state ={
      tokenId:'111111'
    }
    需要引入的那个文件,mapState其实就是state的地址(也可以直接使用this.$store.state调用)
     import {mapState} from 'vuex';
     
    定义一个计算属性,在该页面可以直接使用引入的变量tokenId
    computed:{
             ...mapState([
              "tokenId"
            ])
    },
        mounted(){
            setTimeout(()=>{
                console.log(this.tokenId)
            },1000)
    
    

    2.getters

    getters类似于全局的computed。后端给我们数据不是我们想要的,需要组装一下,这个时候调用
    当然也可以直接在页面里使用computed,当时如果多个页面都用到,去维护多个computed不明智
    写法如下

    export default {
      tokenIDs:(state)=>{   
        return `${state.tokenId} ${state.count}`;
      }
    }
    

    使用

    import { mapGetters, mapState } from 'vuex'
      computed: {
        ...mapState(['count']),
        ...mapGetters(['tokenIDs']),
        counts () {
          return this.$store.state.count
        }
      }
      <p>{{tokenIDs}}</p> 
    
    

    3.更改state里的值

    调用import {mapMutations,mapActions} from 'vuex'(也可以直接使用this.$store.state赋值调用,最好不要直接改,不然定义state的意见就变低了)
        methods:{
          ...mapMutations([  //同步的
              'TOKEN'
          ]),
          ...mapActions([  //异步调用
              'getTOKEN'
          ])
        }
        在想调用的地方用this.TOKEN(data)调用
        附:mutation.js:
        import {
              TOKEN
            } from './types.js'
            export default {
              [TOKEN](state,res){
                state.tokenId=res;
              }
            };
            actions.js:
            import * as types from './types'
            export default {
              getTOKEN:({
                commit
              },res)=>{
                commit(types.TOKEN,res)
              }
            }
            
            
            简单区分同步还是异步调用 一般直接修改state的数据的,用mutation,异步的数据接口请求可以用actions
            
            this.TOKEN(11) = this.$store.commit('TOKEN',111)
            this.getTOKEN(11) = this.$store.dispatch('TOKEN',111)
    
    

    vuex怎么实现热更替

    vuex实现热更替,本质其实使用webpack的热更替

         if (module.hot) { //
        module.hot.accept([
          './state/state',  // 这里是对应的模块地址
          './mutation',
          './actions',
          './getters'
        ], () => {
          const newState = require('./state/state').default  // 采用的export default 的形式
          const newMutations = require('./mutation').default
          const newActions = require('./actions').default
          const newGetters = require('./getters').default
    
          store.hotUpdate({ // 启动热更替
            state: newState,
            mutations: newMutations,
            getters: newGetters,
            actions: newActions
          })
        })
      }
    
  • 相关阅读:
    题解报告:hdu 2062 Subset sequence
    CSS3滑块菜单
    CSS3环形动画菜单
    可折叠显示的发光搜索表单
    Tab动画菜单
    侧边自定义滚动条
    css3条纹边框效果
    css3图片过滤效果
    CSS3图片悬停放大动画
    CSS3响应式侧边菜单
  • 原文地址:https://www.cnblogs.com/liuhuanwen/p/9554931.html
Copyright © 2011-2022 走看看