下载vuexnpm install vuex --save
- 需要下载src新建文件夹store文件夹(store仓库意味着存储所有状态)
- 创建index.js文件、介绍和安装、创建和导出
//首先导入 import Vue from "vue"; import Vuex from "vuex"; //使用 Vue.use(Vuex); //创建 const store = new Vuex.Store({
state() {
return {
count: 0 }; }, mutations: {
}, actions: {
}, getters: {
}, modules: {
} }); //导出 export default store; - 需在main.js中导入，挂载vue上
import Vue from "vue"; import App from "./App"; import store from "./store"; Vue.config.productionTip = false; /* eslint-disable no-new */ new Vue({
el: "#app", store, render: h => h(App)
});
使用
- 需要在浏览器安装devtools，用于调试
- store下面index.js页面中 在页面使用vuex中存储的状态为
$store.state.counter - 页面中需要对state中存放的状态进行修改时 需要先在store中
mutations中定义方法，在页面中调用 括号中传入store里定义的方法名
核心概念
State
- 存储共享状态
- 单一状态树(单一数据源，只使用一个store)
Getters
getters: {
//可以传两个参数state,getters
moreExp(state) {
return state.movies.filter(movies => movies.price > 35);
},
moreExpLength(state, getters) {
return getters.moreExp.length;
},
morePrice(state) {
//可以return一个function
return function(price) {
return state.movies.filter(movies => movies.price > price);
};
}
},
<h2>{
{ $store.state.movies }}</h2>
<h2>{
{ $store.getters.moreExp }}</h2>
<h2>{
{ $store.getters.moreExpLength }}</h2>
<h2>{
{ $store.getters.morePrice(40) }}</h2>
morePrice(state) {
//可以return一个function
return function(price) {
return state.movies.filter(movies => movies.price > price);
};
}
<h2>{
{ $store.getters.morePrice(40) }}</h2>
Mutation
vuex中store状态更新的唯一方式就是通过提交mutation 在index.js中定义mutations
mutations: {
// 方法
addCount(state, count) {
state.count += count;
},
addMovies(state, con) {
state.movies.push(con);
}
},
在页面中通过commit提交
<button @click="addCount(5)">+5</button>
<button @click="addMovies">添加</button>
methods: {
addCount(count) {
this.$store.commit("addCount", count);
},
addMovies() {
const movies = {
id: 5, name: "xiaoliyu", price: 38 };
this.$store.commit("addMovies", movies);
}
}
在index.js中
mutations: {
//payload 负载
addCount(state, payload) {
state.count += payload.count;
}
},
在页面中提交时使用type
addCount(count) {
// this.$store.commit("addCount", count);
this.$store.commit({
type: "addCount",
count
});
Action
在mutations中可以使用异步操作,但是此操作不能被devtools监听，所以进行，对
mutations: {
upda(state, payload) {
state.info.name = payload;
}
},
actions: {
// 异步操作
aup(context,payload) {
// context 上下文 默认属性
setTimeout(() => {
context.commit('upda',payload)
},1000);
}
},
页面通过dispatch使用
upda() {
this.$store.dispatch('aup', "zzzy");
}
mutations: {
upda(state) {
state.info.name = "zzzy";
}
},
actions: {
// 异步操作
aup(context,payload) {
// context 上下文
setTimeout(() => {
context.commit("upda"), console.log(payload.message), payload.success();
}, 1000);
}
},
upda() {
this.$store
.dispatch("aup", {
message: "携带信息",
success() {
console.log("成功");
}
})
}
actions: {
// 异步操作
aup(context, payload) {
return new Promise((resolve, reject) => {
setTimeout(() => {
context.commit("upda");
console.log(payload.message);
resolve("1111");
}, 1000);
});
}
},
upda() {
this.$store
.dispatch("aup", {
message: "携带信息"
})
.then(res => {
console.log("成功");
console.log(res);
});
}
Module
const moduleA = {
state: {
name: "海贼王"
},
getters: {
fullName(state) {
return state.name + "123";
},
fullName2(state, getters) {
return state.name + getters.fullName + "456";
},
fullName3(state, getters, rootGetters) {
return state.name + getters.fullName2 + rootGetters.count;
}
},
mutations: {
updateName(state, payload) {
state.name = payload;
}
},
actions: {
changeName(context, payload) {
setTimeout(() => {
// 可以拿到根状态下的getters
console.log(context.rootGetters.moreExp);
context.commit("updateName", payload);
console.log(context);
});
}
// 对象解构写法
// changeName({ state, commit, rootState }, payload) {
// setTimeout(() => {
// commit("updateName", payload);
// console.log(state);
// console.log(rootState);
// });
// }
}
};
const store = new Vuex.Store({
state() {
return {
count: 0,
movies: [
{
id: 1, name: "海贼王", price: 20 },
{
id: 2, name: "加勒比海盗", price: 30 },
{
id: 3, name: "泰坦尼克号", price: 40 },
{
id: 4, name: "诺曼底登陆", price: 50 }
],
info: {
name: "cala",
age: 28,
height: 178
}
};
},
mutations: {
// 方法
// 默认参数state
add(state) {
state.count++;
},
sub(state) {
state.count--;
},
// addCount(state, count) {
// state.count += count;
// },
addCount(state, payload) {
state.count += payload.count;
},
addMovies(state, con) {
state.movies.push(con);
},
upda(state) {
state.info.name = "zzzy";
}
},
actions: {
// 异步操作
aup(context, payload) {
// context 上下文
// setTimeout(() => {
// context.commit("upda"), console.log(payload.message), payload.success();
// }, 1000);
return new Promise((resolve, reject) => {
setTimeout(() => {
context.commit("upda");
console.log(payload.message);
resolve("1111");
}, 1000);
});
}
},
getters: {
moreExp(state) {
return state.movies.filter(movies => movies.price > 35);
},
moreExpLength(state, getters) {
return getters.moreExp.length;
},
morePrice(state) {
return function(price) {
return state.movies.filter(movies => movies.price > price);
};
}
},
modules: {
a: moduleA
}
});
<template>
<div id="app">
<h1>---------APP module-------</h1>
<h2>{
{ $store.state.a.name }}</h2>
<h2>{
{ $store.getters.fullName }}</h2>
<h2>{
{ $store.getters.fullName2 }}</h2>
<h2>{
{ $store.getters.fullName3 }}</h2>
<button @click="change">修改</button>
<button @click="asyncChange">异步修改</button>
</div>
</template>
change() {
this.$store.commit("updateName", "希瓦娜");
},
asyncChange() {
this.$store.dispatch("changeName", "索尔");
}
包含根状态下的内容,rootGetters以及rootState
vuex代码重构,抽离
在store文件夹下建立对应文件，将对应内容写入导出export 在index.js中引入使用