vuex是专门用来管理vue.js应用程序中状态的一个插件。他的做用是将应用中的全部状态都放在一块儿，vue
集中式来管理。须要声明的是，这里所说的状态指的是vue组件中data里面的属性。简单的来讲,vuex
它就是存储公共变量的东西,而后插件能够经过它来访问,或者修改数据,来达到响应式.npm
至关于一个仓库,里面能够放不少公共的东西,而这些公共的东西均可以让组件使用.学习
首先作这个以前,咱们下载好vuex插件,怎么下载呢 用到咱们的npm run vuex --savethis
下载好 开始配置spa
首先在src文件下建立个store文件 里面再新建一个index.js插件
1. 导入Vue--->import Vue from "vue"调试
2. 导入Vuex--->import Vuex form "./vuex"code
3. Vue.use(Vuex)orm
4.
export default new Vuex.Store({
state:{},
mutations:{},
getters:{}
actions:{},
modules:{}
})
这就是vueX的配置环境
在这里咱们须要注意,咱们用的是Vuex.Store这个功能,因此在新建时用的Vuex.Store,
就是为了在全部组件中使用均可以有这个方法.
接下来咱们介绍一下vuex的属性
state:
一个项目里面,只有一个store,不要创建多个store,全部的数据放在state中就能够了.(单一数据源state)
getters:
数据须要通过一系列变化,而后经过使用getters定义一个方法,而后调用的时候经过$store.getters.方法名来调用
经过三个小例子带着了解一下getters属性
state定义了students的信息以下
students: [ { id: 110, name: "juelebao", age: 17 }, { id: 111, name: "zhangsan", age: 19 }, { id: 112, name: "liuyifei", age: 21 }, { id: 113, name: "zhoujielun", age: 24 } ]
三个小要求:
1. 咱们如今须要将学生信息里面年龄超过20的取出来
2. 取出超过20岁学生的个数
3. 咱们想要经过id进行查询,须要往里面传参数
以上要求均要经过vuex里面的getters属性定义方法
第一个: 须要将学生信息里面年龄超过20的取出来
over20(state){
return state.students.filter( obj =>{
return obj.age>20
})
}
定义这样一个方法就能够了,调用时$store.getters.over20
第二个: 取出超过20岁学生的个数
方法一:
over20count(state){ return state.students.filter( obj=> { return obj.age > 20 }).length }
方法二: 告诉咱们也能够调用getters里面的方法
over20count(state,getters){ return getters.over20.length }
方法三:在调用的时候加length 也就是 $store.getters.over20.length
固然,咱们这些方法在正确调用后,就能够获得结果了
这就是getter一些用法了
简单举个例子以前作过的计数器
咱们如今将计算器封装成一个组件,而后咱们将他放到挂载的页面上
connter.vue代码以及另外一组件(组件2个共用vuex中的数据)
这里咱们将connter放在state中,将事件方法放在mutations中,
注意,咱们在建立increment和decrement事件的时候,传入了state,若是你不写的话,虽然不会报错,可是页面会没有任何变化.因此必需要有一个参数接收,而后利用接收的参数去访问connter变量.而后咱们就去connter组件中定义两个事件了,add和down,固然咱们是经过在方法中使用this.$store.commit("vuex中的mutations中的事件类型")好比个人add中的this.$store.commit("increment")而后就至关于执行了increment这个操做.
疑问: 在组件中如何访问呢?
在组件中,咱们能够这样访问 $store.state.connter在down中用法和add同样
注意:
咱们能够经过mutations方式改变数据,而非直接改变数据$store.state ++,这是由于这样vuex对象能够监听或者追踪到数据的改变. 方便咱们的调试这就是vuex最基本的一个使用了
补充:mutations 携带参数用法
mutations是vuex惟一的提交更新的一种方式,在从此写项目的时候,若是要用vuex咱们必需要用这种方式来对数据进行更新. 不能越过这个直接进行更改.
下面,咱们仍是来学习mutations携带参数的用法
仍是计数器,咱们如今想用动态传递参数的方式来进行计数,好比count为任意数时上代码吧 借助代码帮咱们理解
组件connter中
<button @click="incrementCount(5)">+5</button> <button @click="incrementCount(10)">+10</button> methods:{ incrementCount(count){ this.$store.commit("decrementCount",count) } }
vuex中的mutations:
decrementCount(state,count){ state.connter+=count }
这样咱们就能够进行参数传递了.
二个例子,就是咱们可不能够传递学生的信息?答案确定是能够的
例如代码:
addStu(){ var stu = { id : 114,name:"lisi",age: 21 } this.$store.commit("addStud",stu) }
结合vuex中的mutations定义的
addStu(state,stu){ state.students.push(stu) }
关于mutation的提交风格
这里面的参数pyload被称为负载,就是讲这个地方的数据上传,能够是对象,能够是一个值
若是是学生信息的话直接就传过去一个对象就能够
第一种:
fucn(){
this.$store.commit("事件类型",pyload)
}
第二种:
fucn(){
this.$store.commit({
type:"事件类型",
pyload:pyload
})
}
两种分隔写法不同,在vuex中的mutations中接收值也是不同的
第一种方式接收的时候,pyload是什么就是什么
第二种方式接收的时候,pyload是整个的一个对象.
这样咱们就搞定了mutations携带参数了,注意一下,在mutations中定义的方法,里面的参数第一个参数就是state不能改变.
今天简单总结了下,还有一些属性尚未学,明天学了再拿出来.