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