vuex 的使用

最新推荐文章于 2025-09-08 21:20:30 发布

weixin_30390075

最新推荐文章于 2025-09-08 21:20:30 发布

阅读量52

点赞数

CC 4.0 BY-SA版权

文章标签：后端 webpack ViewUI

原文链接：http://www.cnblogs.com/liuhuanwen/p/9554931.html

博客介绍了vuex使用规则，包括获取index文件定义的state，在项目跳外链时若vuex数据不能及时获取需缓存；getters类似全局computed，可用于组装后端数据；还提及更改state里的值。此外，说明了vuex实现热更替本质是使用webpack的热更替。

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
      })
    })
  }

转载于:https://www.cnblogs.com/liuhuanwen/p/9554931.html