Vues是什么
一个专为Vue.js应用程序开发的状态管理模式
state:驱动应用的数据源
view:以声明方式将state映射到视图
actions:响应view上用户输入导致的状态变化
单向数据流
State->View->Actions->State
多组件共享状态，单向数据流简洁很容易破坏，因此，将组件共享状态抽取出来，以一个全局单例模式管理
组件树构成一个巨大视图，不管在树哪个位置，任何组件都能获取状态或触发行为(听起来敲棒棒哒)
vuex更适合中大型SPA应用
store(仓库)
vuex应用的核心，一个容器，包含应用中大部分state
vuex和全局对象的区别
1.vuex状态存储是响应式，store中状态变化，相应组件更新
2.不能直接改变store中状态，除非显示提交(commit)mutation
var store = new Vuex.Store({
state: {
count: 0
},
mutations: {
increment: function (state) {
state.count++;
}
}
});
//约定,通过显示调用提交mutation方式,明确追踪状态变化
store.commit("increment");
alert(store.state.count);
核心概念
State, Getter, Mutation, Action, Module
State
Vuex使用单一状态树，用一个对象包含全部应用层级状态，作为唯一数据源(SSOT)存在，每个应用仅包含一个store实例
<counter></counter>
var store = new Vuex.Store({
//暴露为store.state.xxx
state: {
count: 0
}
});
var Counter = {
template: "<div>{{count}}</div>",
computed: {
//在计算属性中返回store.state值
count: function () {
//子组件能通过this.$store访问
return this.$store.state.count;
}
}
};
var app = new Vue({
el: "#app",
//根实例中注入store实例,该实例会注入所有子组件中
store: store,
components: {Counter: Counter}
});
mapState辅助函数帮助我们生成计算属性
var Counter = {
data: function () {
return {localCount: 6};
},
template: "<div>{{count}}-{{countAlias}}-{{countPlusLocalState}}</div>",
computed: Vuex.mapState({
count: function (state) {
return state.count;
},
//等同于上
countAlias: "count",
countPlusLocalState: function (state) {
return state.count + this.localCount;
}
})
};
Getter
可对state做额外处理后返回想要的数据
var store = new Vuex.Store({
//暴露为store.getters.xxx
getters: {
doneTodos: function (state) {
return state.todos.filter(function (todo) {
return todo.done;
});
},
doneTodosCount: function (state, getters) {
return getters.doneTodos.length;
}
}
});
var Counter = {
template: "<div>{{count}}</div>",
computed: {
count: function () {
return this.$store.getters.doneTodosCount;
}
}
};
mapGetters辅助函数将store中getter映射到局部计算属性
var Counter = {
template: "<div>{{count}}</div>",
computed: Vuex.mapGetters({
count: "doneTodosCount"
})
};
Mutation
更改Vuex的store中的状态的唯一方法是提交mutation，mutation非常类似事件，包含一个事件名，一个回调，通过store.commit提交该事件
mutation遵守Vue响应规则
1.提前在store中初始化所有属性
2.添加新属性时：使用Vue.set(obj, 'newProp', 123)或
state.obj = {...state.obj, newProp:123};
mutation必须是同步函数
var store = new Vuex.Store({
state: {
count: 1
},
mutations: {
//变更状态
increment: function (state, payload) {
state.count += payload.amount;
}
}
});
//1
console.log(store.state.count);
//唤醒一个mutation handler,调用相应type,提交载荷
store.commit("increment", {amount: 10});
//11
console.log(store.state.count);
//commit对象风格提交方式
store.commit({type: "increment", amount: 10});
//21
console.log(store.state.count);
使用常量代替mutation事件类型
export const SOME_MUTATION = 'SOME_MUTATION';
import {SOME_MUTATION} from "...."
const store = new Vuex.Store({
state:{...},
mutations:{
[SOME_MUTATION](state){...}
}
});
可以在组件中使用this.$store.commit('xxx')提交mutation，或使用mapMutations辅助函数
Action
类似mutation，区别：
1.Action提交的是mutation，而不是直接变更状态
2.Action可以包含任意异步操作
3.通过store.dispatch('xxx')触发
var store = new Vuex.Store({
state: {
count: 0
},
mutations: {
increment: function (state) {
state.count++;
}
},
actions:{
//传入一个与store实例有相同方法和属性的context参数
increment:function(context){
//context.state
//context.getters
//context.commit
context.commit('increment');
//返回一个Promise对象
//return new Promise();
}
}
});
//分发
store.dispatch('increment');
//store.dispatch('increment').then(...);
Module
单一状态树会将所有状态集中到一个大的对象，为避免store臃肿，将store分割成模块(module)
var moduleA = {
state: {v: 0},
mutations: {
increment: function (state) {
state.v++;
}
},
actions: {},
getters: {}
};
var moduleB = {
state: {v: 1},
mutations: {}
};
var store = new Vuex.Store({
state: {v: 3},
modules: {
a: moduleA,
b: moduleB
}
});
alert(store.state.a.v); //0 moduleA状态
alert(store.state.b.v); //1 moduleB状态
store.commit('increment');
alert(store.state.a.v); //1 moduleA状态
alert(store.state.v); //3 moduleA状态
网友评论