//使用示例:
state:{
code:""
}
actions文件:
setCode: ({commit}, code) =>{
commit("code",code)
}
getters文件:
getCode(state){
return state.code;
}
mutations文件:
code: (state,code)=>{
state.code = code;
}
//获取:this.$store.getters.getCode
// 写入:this.$store.dispatch("setCode",val)
// console.log(88888,sessionStorage.clear())
目录结构
当我们在页面上点击一个按钮,它会处发(dispatch)一个action, action 随后会执行(commit)一个mutation, mutation 立即会改变state, state 改变以后,我们的页面会state 获取数据,页面发生了变化。
index.js
import Vuex from "vuex";
import actions from "./actions";
import mutations from "./mutations";
import getters from "./getters";
export default new Vuex.Store({
state:{
token: sessionStorage.getItem("token") && JSON.parse(sessionStorage.getItem("token")) || null,
},
actions,
getters,
mutations
})
state
state为单一状态树,在state中需要定义我们所需要管理的数组、对象、字符串等等,只有在这里定义了,在vue.js的组件中才能获取你定义的这个对象的状态。
getters.js
getter有点类似vue.js的计算属性,当我们需要从store的state中派生出一些状态,那么我们就需要使用getter,getter会接收state作为第一个参数,而且getter的返回值会根据它的依赖被缓存起来,只有getter中的依赖值(state中的某个需要派生状态的值)发生改变的时候才会被重新计算。
export default {
getToken(state) {
return state.token;
}
}
mutation.js
更改store中state状态的唯一方法就是提交mutation,就很类似事件。每个mutation都有一个字符串类型的事件类型和一个回调函数,我们需要改变state的值就要在回调函数中改变。我们要执行这个回调函数,那么我们需要执行一个相应的调用方法:store.commit。
export default {
//设置token
setToken: (state, data) => {
state.accessToken = data;
sessionStorage.setItem("token", JSON.stringify(data))
},
}
action.js
action可以提交mutation,在action中可以执行store.commit,而且action中可以有任何的异步操作。在页面中如果我们要嗲用这个action,则需要执行store.dispatch5、module module其实只是解决了当state中很复杂臃肿的时候,module可以将store分割成模块,每个模块中拥有自己的state、mutation、action和getter。
export default {
setToken:({commit},data)=>{
commit("setToken",data)
},
}