2019-11-04
Vuex 是什么？
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。
#什么是“状态管理模式”？
让我们从一个简单的 Vue 计数应用开始：
new Vue({
// state
data () {
return {
count: 0
}
},
// view
template: `
{{ count }}
`,
// actions
methods: {
increment () {
this.count++
}
}
})
这个状态自管理应用包含以下几个部分：
- state，驱动应用的数据源；
- view，以声明方式将 state 映射到视图；
- actions，响应在 view 上的用户输入导致的状态变化。
以下是一个表示“单向数据流”理念的简单示意：
但是，当我们的应用遇到多个组件共享状态时，单向数据流的简洁性很容易被破坏：
- 多个视图依赖于同一状态。
- 来自不同视图的行为需要变更同一状态。
对于问题一，传参的方法对于多层嵌套的组件将会非常繁琐，并且对于兄弟组件间的状态传递无能为力。对于问题二，我们经常会采用父子组件直接引用或者通过事件来变更和同步状态的多份拷贝。以上的这些模式非常脆弱，通常会导致无法维护的代码。
因此，我们为什么不把组件的共享状态抽取出来，以一个全局单例模式管理呢？在这种模式下，我们的组件树构成了一个巨大的“视图”，不管在树的哪个位置，任何组件都能获取状态或者触发行为！
通过定义和隔离状态管理中的各种概念并通过强制规则维持视图和状态间的独立性，我们的代码将会变得更结构化且易维护。
这就是 Vuex 背后的基本思想，借鉴了 Flux、Redux 和 The Elm Architecture。与其他模式不同的是，Vuex 是专门为 Vue.js 设计的状态管理库，以利用 Vue.js 的细粒度数据响应机制来进行高效的状态更新。
如果你想交互式地学习 Vuex，可以看这个 Scrimba 上的 Vuex 课程，它将录屏和代码试验场混合在了一起，你可以随时暂停并尝试。
#什么情况下我应该使用 Vuex？
Vuex 可以帮助我们管理共享状态，并附带了更多的概念和框架。这需要对短期和长期效益进行权衡。
如果您不打算开发大型单页应用，使用 Vuex 可能是繁琐冗余的。确实是如此——如果您的应用够简单，您最好不要使用 Vuex。一个简单的 store 模式就足够您所需了。但是，如果您需要构建一个中大型单页应用，您很可能会考虑如何更好地在组件外部管理状态，Vuex 将会成为自然而然的选择。引用 Redux 的作者 Dan Abramov 的话说就是：
Flux 架构就像眼镜：您自会知道什么时候需要它。
一、先安装下载vuex
npm install vuex --save
二、在main.js中引入
import Vue from 'vue'
import App from './App.vue'
import router from "./router/index"
import "./assets/css/common.css"
import "./assets/css/reset.css"
import "./assets/style/theme/default.less"
import store from "./store/index"
import mixin from "./mixin/index";
import 'amfe-flexible'
import $axios from '@/utils/request';
Vue.prototype.$axios = $axios;
// 有赞UI库引入
import Vant from 'vant';
import 'vant/lib/index.css';
Vue.use(Vant);
Vue.mixin(mixin);
// Vue.config.productionTip = false
new Vue({
render: h => h(App),
router,store
}).$mount('#app')
三、在src下新建store文件夹，再新建index.js文件,代码如下:(在state中定义变量preOrderId，在mutations中获取到-存值。)
import Vue from "vue"
import Vuex from "vuex"
import createPersistedState from 'vuex-persistedstate'
Vue.use(Vuex)
const config = {
// 本地持久化
plugins: [createPersistedState()],
state:{
isLogin: false,
username:"",
payWayFlag:false,
token:"",
phone: "",
preOrderId:"",
totalMoney:"",
productNumber:"",
selectAddress:[]
// productId: "",
},
//对数据获取之前的再次编译，可以理解为state的计算属性。
getters:{
// token: state => state.token,
username: state => state.username,
isLogin: state => state.isLogin
},
mutations:{
updateToken(state,payload){
state.token = payload
},
updateUsername(state,payload){
state.username = payload
},
updateLogin(state,payload){
state.isLogin = payload
},
updatePhone(state,payload){
state.phone = payload
},
updatePreOrderId(state,payload){
state.preOrderId = payload
},
updateTotalMoney(state,payload){
state.totalMoney = payload
},
updateProductNumber(state,payload){
state.productNumber = payload
},
updateSelectAddress(state,payload){
state.selectAddress = payload || {}
},
// updateProductId(state,payload){
// state.productId = payload
// },
// 支付方式页面的显示与隐藏
payWayFlagChange(state,payload){
state.payWayFlag = payload
},
// // 获取用户名
// login(state,payload){
// }
},
actions:{
},
modules:{
}
}
export default new Vuex.Store(config)
四、在页面文件src\pages\cart\children\CatEdit.vue下，
存储变量的值( this.$store.commit("updatePreOrderId", res.result.preOrderId);)
onSubmit() {
if (!this.isEdit) {
var id = this.cartList.filter(item => {
return item.checked;
});
id.map(item => {
return this.cartsId.push(item.cartId);
});
console.log("this.id", this.cartsId);
let url = "/preOrder/add";
let data = {
totalMoney: this.totalMoney,
cartId: this.cartsId
};
this.$axios
.post(url, data)
.then(res => {
console.log("res-preOrder", res);
this.$store.commit("updatePreOrderId", res.result.preOrderId);
this.$router.push("/order/confirm");
})
.catch(err => {
console.log(err);
});
} else {
let delId = [];
this.checkList = this.cartList.filter(item => {
return item.checked;
});
this.checkList.map(item => {
return delId.push(item.cartId);
});
let url = "/cart/del";
let data = {
cartId: delId
};
this.$axios
.post(url, data)
.then(res => {
console.log(res);
for (let i = 0; i < this.cartList.length; i++) {
for (let j = 0; j < this.checkList.length; j++) {
if (this.cartList[i].cartId == this.checkList[j].cartId) {
this.cartList.splice(i, 1);
}
}
}
})
.catch(err => {
console.log(err);
});
}
},
五、在页面文件src\pages\order\children\ConfirmOrder.vue下，
获取值( let data = {preOrderId: this.$store.state.preOrderId};)
//获取订单商品详情
getPreOrder() {
let url = "/preOrder/detail";
let data = {
preOrderId: this.$store.state.preOrderId
};
console.log("pre-data", data);
this.$axios
.post(url, data)
.then(res => {
console.log("pre-ressult", res.result);
this.preOrderList = res.result;
this.$store.commit("updateTotalMoney", res.result.totalMoney);
if (res.result.totalMoney >= res.result.fullReduceMoney) {
this.preOrderList.expressFee = 0;
} else {
}
})
.catch(err => {
console.log(err);
});
},