一，什么是vuex
官方说法：Vuex 是一个专为 Vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
个人理解：Vuex是用来管理组件之间通信的一个插件
二 Vuex 基本使用篇
安装
npm i vuex -S
项目中的任何地方都要用到vuex，所以要全局注册vuex，并且使用vuex
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
三 Vuex的核心
1, state
用来存放组件之间共享的数据。他跟组件的data选项类似，只不过data选项是用来存放组件的私有数据。
2, getters
有时候，我们需要对state的数据进行筛选，过滤。这些操作都是在组件的计算属性进行的。如果多个组件需要用到筛选后的数据，那我们就必须到处重复写该计算属性函数；或者将其提取到一个公共的工具函数中，并将公共函数多处导入 - 两者都不太理想。如果把数据筛选完在传到计算属性里就不用那么麻烦了，getters就是干这个的，你可以把getters看成是store的计算属性。getters下的函数接收接收state作为第一个参数, getters 改变不了state的值,下一个mutation是唯一可以改变state的值
3,mutation
在 Vuex store 中，实际改变 状态(state) 的唯一方式是通过 提交(commit) 一个 mutation。mutations下的函数接收state作为参数，接收一个叫做payload（载荷）的东东作为第二个参数，这个东东是用来记录开发者使用该函数的一些信息，比如说提交了什么，提交的东西是用来干什么的，包含多个字段，所以载荷一般是对象（其实这个东西跟git的commit很类似）
还有一点需要注意：mutations方法必须是同步方法！
4,action
既然mutations只能处理同步函数，我大js全靠‘异步回调’吃饭，怎么能没有异步，于是actions出现了
a, Actions 提交的是 mutations，而不是直接变更状态。也就是说，actions会通过mutations，让mutations帮他提交数据的变更。
b, Action 可以包含任意异步操作。ajax、setTimeout、setInterval不在话下
5,module
由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。为了解决以上问题，Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割。
四，vuex实例
A，友情提示：
1， this.$store.commit 来触发之前定义好的 mutations 中的方法
2， this.$store 获取到 store,
3， this.$store.state 来获取状态对象，
4，dispatch：翻译为‘派发、派遣’的意思，触发事件时，dispatch就会通知actions（跟commit一样一样的）参数跟commit也是一样的。
5，context：context 是与 store 实例具有相同方法和属性的对象。 可以通过context.state和context.getters 来获取 state 和 getters。
6，new Vuex.Store({}) 表示创建一个Vuex实例，通常情况下，他需要注入到Vue实例里. Store是Vuex的一个核心方法，字面上理解为“仓库”的意思。
B，例子
html代码：
script代码：
Vue.use(Vuex);
var myStore =new Vuex.Store({
state:{
//存放组件之间共享的数据
name:"HL",
age:17,
num:1
},
mutations:{
//显式的更改state里的数据
change:function(state,a){
console.log(state.num += a);
},
changeAsync:function(state,a){
console.log(state.num +=a);
}
},
getters:{
//过滤state数据
getAge:function(state){
if (state.age >18)
return state.age
else
state.age="未成年"
return state.age
}
},
actions:{
//设置延时
add:function(context,value){
setTimeout(function(){
//提交事件
context.commit('changeAsync',value);//context：context 是与 store 实例具有相同方法和属性的对象。
// 可以通过context.state和context.getters 来获取 state 和 getters。
},1000)
}
}
});
Vue.component('hello',{
template:"
<div>
<p @click='changeNum'>
姓名：{{name}} 年龄：{{age}} 次数：{{num}}
</p>
<button @click='changeNumAnsyc'>change</button>
</div>" ,
computed: {
name:function(){
return this.$store.state.name //this.$store 获取到 store, this.$store.state 来获取状态对象，
},
age:function () {
return this.$store.getters.getAge
},
num:function(){
return this.$store.state.num
}
},
mounted:function(){
console.log(this)
},
methods:{
changeNum:function () {
//在组件中提交
this.$store.commit('change',10) //this.$store.commit 来触发之前定义好的 mutations 中的方法 change是mutations里的函数，a=10
},
changeNumAnsyc:function(){
this.$store.dispatch('add', 5);
//dispatch：翻译为‘派发、派遣’的意思，触发事件时，dispatch就会通知actions（跟commit一样一样的）参数跟commit也是一样的。
}
},
data:function(){
return {
// num:5
}
}
})
new Vue({
el:"#app",
data:{
name:"dk"
},
store:myStore,
mounted:function(){
console.log(this)
}
})
网友评论