vueX基础知识点笔记

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不能改变.

今天简单总结了下,还有一些属性还没有学,明天学了再拿出来.