Vuex总结
2018-12-18 本文已影响0人
xbmchina
简介
简单来讲：共享的状态管理器，比如你想修改某些背景色，设备状态、cookie等信息的时候你可以考虑用它。其他的当跨页面共享数据的时候也可以考虑用它。其他的自己去看官网、所有的API参考
State单一状态树
用来存储数据的，相当于一个变量（支持json对象、数组、字符串等），相当于数据源。
获取state中的状态值可以通过直接找或者通过getter方式
//方式一
this.$store.state.test.phone.name
//方式二
this.$store.getters.phone
Getter
有时候我们需要从 store 中的 state 中派生出一些状态，例如对列表进行过滤并计数。
Vuex 允许我们在 store 中定义“getter”（可以认为是 store 的计算属性）。就像计算属性一样，getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。
Getter可以在组件的computed的时候通过get方法进行获取。以及触发Mutation中的方法进行修改。
computed: {
company: {
get() {
return this.$store.state.test.company;
},
set(value) {
this.$store.commit("CHANGE_COMPANY", value);
}
}
Mutation
更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。它是同步的。
在页面可以直接用commit的方式触发其中的方法。
this.$store.commit("CHANGE_COMPANY", value);
Action
Action 类似于 mutation，不同在于：
- Action 提交的是 mutation，而不是直接变更状态。
- Action 可以包含任意异步操作。
Action可以通过dispatch来触发。
this.$store.dispatch('toggleDevice',this.company)
所有整合
主配置index.js
import Vue from 'vue'
import Vuex from 'vuex'
import app from './modules/app'
import test from './modules/test'
import getters from './getters'
Vue.use(Vuex)
export default new Vuex.Store({
modules: {
test
},
getters
})
store中的某个模块 test.js
const test = {
state: {
phone: {
name: 'xiaomi',
price: 3000
},
company: 'xm'
},
mutations: {
CHANGE_PHONE: (state, device) => {
console.log("CHANGE_PHONE = device:"+device)
if (device == 'hw') {
state.phone.price = state.phone.price + 1000
state.phone.name = 'huawei'
state.phone.company == 'hw'
} else {
state.phone.price = state.phone.price - 1000
state.phone.name = 'xiaomi'
state.phone.company == 'xm'
}
},
CHANGE_COMPANY: (state, device) => {
console.log("CHANGE_COMPANY = device:"+device)
state.phone.company == device
},
},
actions: {
toggleDevice({ commit }, device) {
console.log("device:"+device)
commit('CHANGE_PHONE', device)
},
toggleCompany({ commit }, device) {
console.log("device:"+device)
commit('CHANGE_COMPANY', device)
}
}
}
export default test
getter.js
const getters = {
phone: state => state.test.phone
}
export default getters
页面模板调用index.vue
<template>
<div>
这是一个layout{{userame}}
<input v-model="company">
<a @click="handleLogin">点击我</a>
</div>
</template>
<script>
import { getTest } from "@/api/login";
export default {
name: "Layout",
data() {
return {
userame: this.$store.state.test.phone.name
};
},
computed: {
company: {
get() {
return this.$store.state.test.company;
},
set(value) {
this.$store.commit("CHANGE_COMPANY", value);
}
}
},
methods: {
handleLogin() {
console.log("xxxxxxxxxxxxxxxx=="+this.company);
console.log(this.$store.getters.phone);
// this.$store.commit("CHANGE_PHONE", this.$store.state.test.company);
this.$store.dispatch('toggleDevice',this.company)
console.log(this.$store.getters.phone);
// getTest(this.userame).then(response => {
// alert(response.data);
// this.$store.dispatch('increment')
// })
}
}
};
</script>
其他知识
- 表单的处理，关于store与表单元素双向绑定的实现：https://vuex.vuejs.org/zh/guide/forms.html
