我要评论vuex用来管理vue的所有组件状态。
首先下载vuex，”vuex”:”^3.0.1”，运用”vuex-persistedstate”来对数据进行缓存。下载”vuex-persistedstate”
在文件中引入：（新建一个store文件夹，在文件夹下的index.js文件进行如下编写）
import Vue from 'vue' import Vuex from 'vuex' import createPersistedState from 'vuex-persistedstate' Vue.use(Vuex)
定义简单模块：
const module = {
state: {
user: {
name: 'rookie'
}
},
getters: {},
mutations: {
setUser(state, payload){
if(payload.hasOwnProperty('name')){
state.user.name = payload.name
}
}
},
plugins: [createPersistedState()]
}
上面是一个简单的vuex，在vuex中对应的store应用，在store中包含组件的共享状态state和改变状态的方法（暂且称作方法）mutations。注意state相当于对外的只读状态，不能通过store.state.user.name来更改，使用store.commit方法通过触发mutations改变state。
在页面中获取记录的值name为rookie：
mounted(){
console.log(this.$store.state.user.name);
}
store.state为获取store中的值，此时在my页面中打印出来的值为rookie，而我们想要修改name的值，则需要借助store.commit方法来触发mutations:
this.$store.commit('setUser',{name: 'kuke_kuke'})
在mutations中找到setUser，第二个参数payload为传入的对象{name: ‘kuke_kuke’}，调用方法hadOwnProperty来判断传入的对象是否有name属性，从而修改state中的值，此时在页面中再次打印user.name的值为’kuke _ kuke’。
最后导出模块：
const store = new Vuex.Store(module) export default store
别忘记在main.js中获取模块并使用：
import store from './store'
new Vue({
store
})
您可能感兴趣的文章:
如您对本文有疑问或者有任何想说的，请 点击进行留言回复，万千网友为您解惑！
网友评论