在这篇文章，你将快速学习到：
如何安装
什么是 Vuex
Hello World
核心概念
mapState Helper
mapState Helper
State
Getters
Mutations
Actions
Modules
如何安装
标准安装
npm install vuex
什么是 Vuex
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
Hello World
引入 vue.js & vuex.js
创建 index.html
创建 Vuex.Store():
store = new Vuex.Store({})提交变化:
store.commit('increment')
<!DOCTYPE html><html><head>
<meta charset="utf8">
<meta name="viewport" content="minimal-ui,width=device-width,initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=no" />
<title>Hello Vuex</title>
<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="vue.js"></script>
<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="vuex.js"></script></head><body>
<script>
var store = new Vuex.Store({ state: { count: 0
}, mutations: { increment: function(state){
state.count++;
}
}
});
store.commit('increment'); console.log(store.state.count); </script></body></html>核心概念
State
创建 Vuex.Store()
定义 state.count:
{ state: { count: 0 }}在组件中使用:
this.$store.state.count
<!DOCTYPE html><html><head>
<meta charset="utf8">
<meta name="viewport" content="minimal-ui,width=device-width,initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=no" />
<title>Vuex State</title>
<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="vue.js"></script>
<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="vuex.js"></script></head><body>
<div id="app">
{{ count }} </div>
<script>
var store = new Vuex.Store({
state: {
count: 1
}
});
var app = new Vue({
el: '#app',
store: store,
computed: {
count: function(){ return this.$store.state.count
}
}
}); </script></body></html>Getters
创建 Vuex.Store()
声明 getters.doneTodos:
{ getters: { doneTodos: ... }}在组件中使用:
this.$store.getters.doneTodos
<!DOCTYPE html><html><head>
<meta charset="utf8">
<meta name="viewport" content="minimal-ui,width=device-width,initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=no" />
<title>Vuex Getter</title>
<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="vue.js"></script>
<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="vuex.js"></script></head><body>
<div id="app">
{{ doneTodos }} </div>
<script>
var store = new Vuex.Store({
state: {
todos: [
{id: 1, text: 'a thing', done: true },
{id: 2, text: 'B thing', done: false }
]
},
getters: {
doneTodos: function(state){ return state.todos.filter(function(todo){ return todo.done;
});
}
}
});
var app = new Vue({
el: '#app',
store: store,
computed: {
doneTodos: function(){ return this.$store.getters.doneTodos
}
}
}); </script></body></html>Mutations
创建 Vuex.Store()
声明 mutations.increment:
{ mutations: { increment: function(){} }}在组件中使用:
this.$store.commit('increment')
<!DOCTYPE html><html><head>
<meta charset="utf8">
<meta name="viewport" content="minimal-ui,width=device-width,initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=no" />
<title>Vuex Mutation</title>
<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="vue.js"></script>
<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="vuex.js"></script></head><body>
<div id="app">
{{ count }} <button @click="increment">increment</button>
</div>
<script>
var store = new Vuex.Store({
state: {
count: 1
},
mutations: {
increment: function(state) {
state.count++;
}
}
});
var app = new Vue({
el: '#app',
store: store,
computed: {
count: function() { return this.$store.state.count
}
},
methods: {
increment: function() { this.$store.commit('increment');
}
}
}); </script></body></html>Actions
create Vuex.Store()
声明 actions.increment:
{ actions: { increment: function(){} }}在组件中使用:
this.$store.dispatch('increment')
<!DOCTYPE html><html><head>
<meta charset="utf8">
<meta name="viewport" content="minimal-ui,width=device-width,initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=no" />
<title>Vuex Action</title>
<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="vue.js"></script>
<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="vuex.js"></script></head><body>
<div id="app">
{{ count }} <button @click="increment">increment</button>
</div>
<script>
var store = new Vuex.Store({
state: {
count: 1
},
mutations: {
increment: function(state) {
state.count++;
}
},
actions: {
increment: function(context) {
context.commit('increment');
}
}
});
var app = new Vue({
el: '#app',
store: store,
computed: {
count: function() { return this.$store.state.count
}
},
methods: {
increment: function() { this.$store.dispatch('increment');
}
}
}); </script></body></html>Modules
创建 moduleA & moduleB
在两个模块中创建 Vuex.Store() :
new Vuex.Store({modules: {a: moduleA,b: moduleB}})在组件中使用:
this.$store.state.a
〖坚持的一俢〗
点击查看更多内容
为 TA 点赞
评论
共同学习，写下你的评论
评论加载中...
作者其他优质文章
正在加载中
感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦