vuex的知识点笔记

个人学习vuex时的一些随笔

一、vuex的解释和理解

简单来说，就是一个大家都能用的存储变量的对象

二、vuex一般都放什么东西

一般都是放一些多个界面都需要的东西，比如登陆状态信息等

三、vuex的使用

①安装

npm i vuex –save

②在src中创建一个文件夹store（仓库）,里面建一个index.js

③在imdex.js中，导入vue，导入vuex，安装vuex插件，创建vuex.Store实例，导出vuex实例

注意：创建vuex实例的时候，是new Vuex.Store()这个方法，命名也是store

import Vue from 'vue'     //导入vue，导入vuex

import Vuex from 'vuex'

 

Vue.use(Vuex)   //安装vuex插件

 

const store = new Vuex.Store({    //这里是Vuex.Store,要注意

  state:{

​    count:0

  }

})

 

export default store

 

④在main.js中导入vuex，在vue实例中注册

import Vue from 'vue'

import App from './App'

import store from './store/index'

 

Vue.config.productionTip = false

 

/* eslint-disable no-new */

new Vue({

  el: '#app',

  store,

  render: h => h(App)

})

⑤通过$store.state使用存储的状态

例如：在其他组件中通过 $store.state.count 使用count

state:{

​ count:0

}

四、使用vuex的count

①首先，在store中,在state中定义一个状态count，在组件中通过$store.state.count使用

②修改count的值，通过在mutations定义方法，然后在组件中调用mutations中的方法进行修改state的值，使用时在组件中的methods中定义一个方法，然后通过this.$store.commit()

获取到mutations的方法进行提交

methods: {

​    add(){

​      this.$store.commit('increment')   //通过mutation进行修改state，在这里通过this.$store.commit()方法提交

​    },

​    sub(){

​      this.$store.commit('decrement')

​    }

  },

五、vuex的单一状态树

一般的，vuex推荐我们只创建一个store，这样方便我们管理和维护

六、vuex的getters

getters:{     //类似于计算属性

​    powercount(state){    //getters中定义的属性也是默认传入一个state属性

​      return state.count * state.count

​    },

​    more20stu(state){    //获取大于20岁的学生

​      return state.student.filter(s => s.age>20)   //通过数组方法中的filter()函数，s为传入的数组，通过箭头函

​                                                   //头函数，来判断年龄大于20岁的学生

​    },

​    more20stulength(state,getters){   //getters中的参数除了state，还可以传入getters，来获取其他getter

​      return getters.more20stu.length

​    },

​    moreage(state){    //当我们想要给getter传参数时，可以在getter中返回一个函数，这样在使用时传入参数时便能传入

​                       //到函数中，这时候便能在函数中通过参数进行一些操作

​      return function(age){  //在函数中传入参数，这样便能动态的决定age大小

​        return state.student.filter(s => s.age>age)

​      }

​    }

  },

 

在组件中使用

   <h3>{{ $store.getters.powercount }}</h3>

 

​    <h3>{{ $store.getters.more20stu }}</h3>

 

​    <h3>{{ $store.getters.more20stulength }}</h3>

 

​    <h3>{{ $store.getters.moreage(20) }}</h3>

七、vuex中的mutations

①当需要给mutation传递参数时，很简单，在调用方法的时候带上参数即可

​ addcount(count){

​ this.$store.commit(‘addcount’,count) //如果想给mutation传递参数，只需要在commit()中的mutation名后面跟上参数即可

​ }

然后在mutation中接收参数

​ addcount(state,count){ //mutations接收参数时，可以直接在state后面再加一个参数

​ state.count += count

​ }

最后使用方法即可

​ <button @click=“addcount(5)”>+5

②当需要传的参数有多个的时候，可以以一个对象的形式传参，这叫做给mutation传一个荷载（payload）。这里的stu就是一个payload

​ addstu(){

​ const stu = {

​ id:104,

​ name:“kirito”,

​ age:21

​ };

​ this.$store.commit(‘addstu’,stu)

​ }

​ addstu(state,stu){ //这里传过来的stu是一个对象

​ state.student.push(stu) //通过数组的push()方法将对象添加进数组

​ }

③mutation的提交风格

我们之前的提交方式为普通方式

​ <button @click=“addcount(5)”>+5

​ addcount(count){

​ this.$store.commit(‘addcount’,count)

​ },

这里传递过去的count就是一个数字5

而还有一种特殊的提交方式，便是提交一个对象过去

​ this.$store.commit({ //直接传一个对象，相当于传过去一个payload(荷载)

​ type:‘addcount’, //这里的type指的就是mutation名

​ count //count指的就是count:count，用了es6简写

​ })

此时我们的mutation接收到的patload便不再是一个5，而是我们传的这个数组，使用时便不再是直接使用，而是通过对象的.方式来使用

​ addcount(state,payload){

​ state.count += payload.count //这里通过.count的方法拿到payload中的count

​ },

当传的参数多的时候，用特殊提交方式会更简洁一点

八、vuex中state中的响应规则

只有在store中初始化好的state中的数据，才有响应式的特性

九、vuex中的actions

在vuex中，只能通过mutation修改state，而mutation中执行的是同步操作，如果在mutation中执行异步操作，那么在devtools中会追踪不到数据的变化，所以，当执行异步操作时，我们要在actions中进行，而Actions便是专门用于执行异步操作

actions:{ //用于处理异步操作

​ aupdate(context){ //当我们要使用actions时，一样在actions定义一个方法，和mutations不同的是，mutations中的

​ //默认参数是state,而actions的默认参数是context(上下文),在这里,context指的是store实例

​ setTimeout(() => {

​ context.commit(‘updatainfo’) //在异步操作中通过commit执行mutation，相当于饶了一步执行

​ }, 1000);

​ }

},

我们在使用mutation时，是通过this.$store.commit()方法使用，而我们在组件中使用action时，需要通过一个新的方法 dispatch来使用action

​

{{ $store.state.info }}

​ updatainfo(){

​ this.$store.dispatch(‘aupdate’)

​ }

而action传参也是和mutation一样

actions:{ //用于处理异步操作

​ aupdate(context,payload){ //参数使用和mutation一样

​ setTimeout(() => {

​ context.commit(‘updatainfo’, payload)

​ }, 1000);

​ }

},

十、vuex中的modules

modules:{ //modules，模块，在vuex中，由于单一状态树的限制，我们只能创建一个store，所以也只有一个state，但是如果所有数据都放在state中，那么代码数据将会显得很臃肿，所以我们需要使用modules来分担一些数据

​ a:{ //我们创建一个叫做a的模块，模块中和store中一样，也有基本的要素

​ state:{

​ name:“zhangsan”, //在模块中定义的state，最后将会以一个对象的方式加入到store中的state，所以在使用的时候，

​ //我们需要这么用：this.$state.a.name 来使用

​ },

​ mutations:{

​ updataName(state,payload){ //modules中的mutations，用起来和store中的用法是一样的，都是通过commit提交，

​ //this.$store.commit(‘updataName’),系统会先去store里面看有没有这个mutation,没找到便会

​ //来modules中来找,传参的方式也是一样，会默认传一个state，第二个是自己传的参数

​ return state.name = payload

​ }

​ },

​ actions:{ //也是默认传一个context，只不过这里的context指的不是store，而是模块本身

​ anyscupdata(context){ //在使用时通过this.$store.dispatch()使用

​ setTimeout(() => {

​ context.commit(‘updataName’,‘wangwu’)

​ }, 1000);

​ }

​ },

​ getters:{ //modules中的getters和store中的一样，也是通过$store.getters.名字使用

​ updataName2(state){ //也是默认传入state

​ return state.name + ‘11111’

​ },

​ updataName3(state,getters){ //也可以把getters当成参数,获取到其他getter

​ return getters.updataName2 + ‘22222’

​ },

​ updataName4(state,getters,rootState){ //还可以获取到store中的state，通过rootState

​ return getters.updataName3 + rootState.count

​ }

​ },

​ }

}

十一、vuex的目录结构化

将store中的每个核心抽离成单独的模块，再通过import导入，这样整个代码就显得十分简洁

import Vue from ‘vue’

import Vuex from ‘vuex’

//通过import导入

import mutations from ‘./mutations’

import actions from ‘./actions’

import getters from ‘./getters’

import moduleA from ‘./modules/moduleA’

Vue.use(Vuex)

const state = {

//用于存放状态

count: 1000,

student: [

​ { id: 100, name: “naruto”, age: 18 },

​ { id: 101, name: “sasiki”, age: 14 },

​ { id: 102, name: “sora”, age: 25 },

​ { id: 103, name: “siro”, age: 27 },

],

info: {

​ id: 105, name: “kobe”, age: 30

}

}

const store = new Vuex.Store({

state,

mutations,

actions,

getters,

modules: { //modules，模块，在vuex中，由于单一状态树的限时，我们只能创建一个store，所以也只有一个state，但是如果

​ //所有数据都放在state中，那么代码数据将会显得很臃肿，所以我们需要使用modules来分担一些数据

​ a: moduleA

}

})

export default store

十二、辅助函数的使用

mapGetter/mapActions

可以直接把getters或者actions里面的东西映射到要用的地方

在要用的组件中的methods或者computed中，直接使用

. . .mapAction( [ ‘ 要用的方法名 ’ ] )

就可以了

之前要使用actions都是要用dispatch进行使用的

This.$store.dispatch(‘方法名’，参数)

使用了辅助函数之后就可以直接

This.方法名（参数）

= new Vuex.Store({

state,

mutations,

actions,

getters,

modules: { //modules，模块，在vuex中，由于单一状态树的限时，我们只能创建一个store，所以也只有一个state，但是如果

​ //所有数据都放在state中，那么代码数据将会显得很臃肿，所以我们需要使用modules来分担一些数据

​ a: moduleA

}

})

export default store

[外链图片转存中…(img-9eXGyly2-1570697067661)]

十二、辅助函数的使用

mapGetter/mapActions

可以直接把getters或者actions里面的东西映射到要用的地方

在要用的组件中的methods或者computed中，直接使用

. . .mapAction( [ ‘ 要用的方法名 ’ ] )

就可以了

之前要使用actions都是要用dispatch进行使用的

This.$store.dispatch(‘方法名’，参数)

使用了辅助函数之后就可以直接

This.方法名（参数）

这样写的效果和上面用dispatch是一样的