vuex是专门用来管理vue.js应用程序中状态的一个插件。他的作用是将应用中的所有状态都放在一起，
集中式来管理。需要声明的是，这里所说的状态指的是vue组件中data里面的属性。简单的来说,
它就是存储公共变量的东西,然后插件可以通过它来访问,或者修改数据,来达到响应式.
相当于一个仓库,里面可以放很多公共的东西,而这些公共的东西都可以让组件使用.
首先做这个之前,我们下载好vuex插件,怎么下载呢 用到我们的npm run vuex --save
下载好 开始配置
首先在src文件下创建个store文件 里面再新建一个index.js
1. 导入Vue--->import Vue from "vue"
2. 导入Vuex--->import Vuex form "./vuex"
3. Vue.use(Vuex)
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不能改变.
今天简单总结了下,还有一些属性还没有学,明天学了再拿出来.