-
state
state:{
nameProps:1
}
//获取 computed
1.1 方法一
this. s t o r e . s t a t e . n a m e P r o p s t h i s . store.state.nameProps this. store.state.namePropsthis.store.state.modeulA.nameProps
1.2 方法二
mapState({
nameProps:state=>state.nameProps
nameProps:state=>state.modeulA.nameProps
})
1.3 方法三
mapState([
‘nameProps’ //非modlue中的state
]) -
getters
gettters:{
nameProps:state=>{
return state.nameProps
}
}//获取值 computed
2.1 方法一
mapGetters([
nameProps
])
2.2 方法二
this.$store.getter.nameProps -
modules
在主文件index.js里注入,结构和主文件相同
modules:{modulesA} -
mutations
functionProps(state,param){
//param也可为object
state.nameProps=param
}
使用方法 methods4.1 方法一
this. s t o r e . c o m m i t ( f u n c t i o n P r o p s , p a r a m ) t h i s . store.commit(functionProps,param) this. store.commit(functionProps,param)this.store.commit({
type:‘functionProps’,
param:param
})4.2 方法二
mapMutations([
‘functionProps’
]),this.functionProps(param)
-
action
//异步
functionProps({commit,state,dispatch},param){
api(param).then(res=>{
const {code,data}=res
commit(‘functionMutProps’,data) //调用mutations方法设置值
dispatch(‘functionProps1’,data ) // 调用action其他方法
state //获取state值子模块多rootState,可获取index.js文件state值 {commit,state,rootState,dispatch}
}).catch(e=>{
})
}//同步
async functionProps1({commit,state,dispatch},param){
try{
const res= await api()
const {code,data}=res
commit(‘functionMutProps’,data) //调用mutations方法设置值
dispatch(‘functionProps1’,data ) // 调用action其他方法
state //获取state值子模块多rootState,可获取index.js文件state值 {commit,state,rootState,dispatch}
}.catch(e){}}
//使用方法 methods
5.1 方法一
mapActions([
‘functionProps’,
‘functionProps1’
])this.functionProps(param)
5.2 方法二
this.$store.dispatch(‘functionProps’,param) -
plugins:避免刷新文件后数据丢失
//index.js文件注入
plugins:[pluginsProps]//使用方法
创建js文件
export default store=>{
if (localStorage.state) store.replaceState(JSON.parse(localStorage.state))
store.subscribe((mutations, state) => {
localStorage.state = JSON.stringify(state)
})
} -
vuex和双向绑定
computed:{
inputValue:{
get(){
//获取值
return this.$store.state.nameProps
},
set(val){
//inputValue改变后改变state里面的缓存值
this.functionMulProps(val) //通过mapMutatios注册后使用
}
}
}
状态管理-vuex
猜你喜欢
转载自blog.csdn.net/weixin_38961329/article/details/115266004
今日推荐
周排行