代码拉取完成,页面将自动刷新
vuex是一个专为vue.js应用程序开发的状态管理模式,vuex解决了组件之间同一状态的共享问题。
存储初始化数据 可通过
this.$store.state.xxxx
读取
对state中的数据进行二次处理(对数据进行过滤,类似filter的作用)如state返回的值时一个对象时,而需要拿对象中指定键名的值时,可以使用
this.$store.getters.xxx
对数据进行计算的方法可以写在里面(类似computed),在页面中触发时使用
this.$store.commit('mutationName')
来触发对应的mutationName方法进行修改state的值;
action的功能和mutation时类似的,都可以改变strore中的state中初始的数据,有两个不同点
- action主要处理的时异步的操作,mutation必须时同步执行的,action则可以处理同步和异步。
- action改变状态,最后时通过提交mutation
this.$store.dispatch(actionName)
- 角色定位基于流程顺序,两者扮演不同的角色。muation专注修改state,理论上时修改state的唯一途径;action专注业务代码、异步操作
可以实现模块化使用,类似vue中的模块管理
export default new Vuex.Store({
modules:{
login,
app,
user
}
})
图示
安装
npm install vuex --save
代码结构
import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex);
export default new Vuex.Store({
state: {},
getters: {},
mutations: {},
actions: {},
modules: {}
});
state
存储和getters
获取vuex存储端
import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex);
export default new Vuex.Store({
state: {
isOpen: false,
count: 10
},
getters: {
// 对count数据进行+10处理再输出
count: (state) => {
return state.count + 10;
},
// 或者
count: state => state.count + 10
}
});
vue读取端
export default {
data () {
// 通过state方式获取
console.log(this.$store.state.isOpen); // 输出结果 false
// 可以预先对数据进行加工处理在输出
console.log(this.$store.getters.count);
return {
};
}
}
mutations
转变方法vuex存储端
export default new Vuex.Store({
state: {
count: 10
},
mutations: {
setCount(state,value){
state.count = value;
}
},
actions: {
},
modules: {
}
})
vuex读取端
export default {
name: "Home",
data () {
// 初始化输出的值为20
console.log(this.$store.state.count);
// 通过该方式对store中的数据进行修改
this.$store.commit('setCount',100);
// 修改后的值为 100
console.log(this.$store.state.count);
return {
};
}
}
actions
修改数据vuex存储端
export default new Vuex.Store({
state: {
isOpen: false,
count: 10
},
getters: {
count: (state) => {
return state.count + 10;
},
// 或者
count: state => state.count + 10,
},
mutations: {
setCount (state, value) {
state.count = value;
}
},
actions: {
setCountAction (content, data) {
//content 中包含state,getters,commit,rootGetters和rootState对象
content.commit("setCount",1000);
}
},
modules: {
}
})
vue读取端
export default {
name: "Home",
data () {
// 初始输出为20
console.log(this.$store.getters.count);
// 通过该方式对store中的数据进行修改
this.$store.commit('setCount',100);
// 输出为100
console.log(this.$store.state.count);
// 通过该方式调用vuex中actions中的setCountAction方法,再通过该方法内部调用mutations中的方法进行state值修改
this.$store.dispatch('setCountAction');
// 最终输出为1000
console.log(this.$store.state.count);
return {
};
}
}
vuex存储端
export default new Vuex.Store({
state: {
token:''
},
getters: {},
mutations: {},
actions: {
LoginSyn (content, requestData) {
return new Promise((resolve, reject) => {
// 调用一个异步接口
Login(requestData)
.then((response)=>{
// 可以对接口返回的数据进行vuex存储处理
content.$state.token = response.data.token;
resolve(response);
})
.catch(error=>{
reject(error);
})
})
}
},
modules: {
}
})
vue读取端
export default {
data () {
// 调接口
this.$store.dispatch('loginSyn', data)
.then(response=>{
// 根据接口返回的结果进行处理
}).catch(error=>{
});
return {
};
}
}
modules
模块在store模块中的新建对应的模块,如
login.js
、user.js
等 vuex主入口文件index.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
// 引入模块
import app from "./app.js";
import login from "./login.js";
import user from "./user.js";
...
export default new Vuex.Store({
modules: {
app,
login,
user,
...
}
})
各模块文件的数据
app.js
const app = {
state: {
},
getters: {
},
mutations: {
},
actions: {
}
};
export default app;
login.js
```js
const login = {
state: {
},
getters: {
},
mutations: {
},
actions: {
}
};
export default login;
... vue读取端
读取时对应的方法要增加对应的模块名称
this.$store.getters.模块名称.对应的键值
this.$store.state.模块名称.对应的键值
this.$store.commit.方法名称
this.$store.dispatch.模块名称.方法名称
各模块文件的数据
app.js
const state = {};
const getters = {};
const mutations = {};
const actions = {};
export default {
namespaced: true, // 启用命名空间模式
state,
getters,
mutations,
actions
};
login.js
const state = {};
const getters = {};
const mutations = {};
const actions = {};
export default {
namespaced: true, // 启用命名空间模式
state,
getters,
mutations,
actions
};
... vue读取端
读取时对应的方法要增加对应的模块名称
this.$store.getters.模块名称.对应的键值
this.$store.state.模块名称.对应的键值
this.$store.commit(模块名称/方法名称)
this.$store.dispatch(模块名称/方法名称)
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。