Vuex

MrYu2020-05-27VueVue

简介

Vuex通常在src/store文件夹内
Vuex 包括
- state 存放状态
- mutations state成员操作
- getter 加工state成员给外界
- actions 异步操作
- modules 模块化状态管理

初始化store下index.js中的内容

import Vue from 'vue'
import Vuex from 'vuex'
//挂载Vuex
Vue.use(Vuex)
//创建VueX对象
const store = new Vuex({
    state:{
        //存放的键值对就是所要管理的状态
        name:'helloVueX'
    }
})
export default store

挂载store到当前项目中。main.js

import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store'
Vue.config.productionTip = false
new Vue({
  el: '#app',
  router,
  store,  //store:store 和router一样，将我们创建的Vuex实例挂载到这个vue实例中
  render: h => h(App)
})

在组件中使用Vuex

<template>
    <div id='app'>
        name:
        <h1>{{ $store.state.name }}</h1>
    </div>
</template>
...,
methods:{
    add(){
      console.log(this.$store.state.name)
    }
},
...

WARNING

注意，请不要在此处更改state中的状态的值

工作流程

如下图：

mixureSecure

首先，Vue组件如果调用某个VueX的方法过程中需要向后端请求时或者说出现异步操作时，需要dispatch VueX中actions的方法，以保证数据的同步。可以说，action的存在就是为了让mutations中的方法能在异步操作中起作用。
如果没有异步操作，那么我们就可以直接在组件内提交状态中的Mutations中自己编写的方法来达成对state成员的操作。注意，s不建议在组件中直接对state中的成员进行操作，这是因为直接修改(例如：this.$store.state.name = 'hello')的话不能被VueDevtools所监控到。

Mutations

Mutations是操作state数据放啊的集合，比如数据的修改、增加、删除等等

使用方法

mutations 方法都有默认形参([state] [,payload])
state 是当前Vuex对象中的state

payload是该方法在被调用时传递参数使用的

例：我们编写一个方法，当被执行时，能把下列中的name值修改为”jack“，我们只需要这样做

// index.js

import Vue from 'vue'
import Vuex from 'vuex'

Vuel.use(Vuex)

const store = new Vuex({
    state:{
        name:'helloVuex'
    },
    mutations:{
        edit(state){
            state.name='jack'
        }
    }
})

export default store

而在组件中，我们需要这样去调用这个mutation——例如在App.vue的某个method中：
```
this.$store.commit('edit')  
```

传值

在实际生产过程中，会遇到需要在提交某个mutation是需要携带一些参数给方法使用

单个值提交时
```
this.$store.commit('edit',15)
```
当需要多参提交时，推荐把它们放在一个对象中来提交：
```
this.$store.commit('edit',{age：15，sex:'男'})
```

接收挂载参数时:

edit(state,payload){
    state.name = 'jack'
    console.log(payload) // 15或{age:15,sex:'男'}
}

另一种提交方式

this.$store.commit({
    type:'edit',
    payload:{
        age:15,
        sex:'男'
    }
})

增删state中的成员
- 为了配合Vue的响应式数据，我们在Mutations方法中，应当使用Vue提供的方法进行操作。如果使用delete或者xx.xx = xx的形式去删或者增，则Vue不能对数据进行实时响应。
- Vue.set 为某个对象设置成员的值，若不存在则新增
- 例如对state对象中添加一个age成员
```
Vue.set(state,'age',15)
```
- Vue.delete删除成员
- 将刚刚添加age成员删除
```
Vue.delete(state,'age')
```

Getters

可以对state中的成员加工后传递给外界

Getters中的方法有两个默认参数

state当前VueX对象中的状态对象

getters当前getters对象，用于将getters下的其他getter拿来用

getters:{
  nameInfo(state){
    return "姓名” + state.name
  },
  fullInfo(state,getters){
    return getters.nameInfo + '年龄' + state.age
  }
}

组件中调用

this.$store.getters.fullInfo

Actions

由于直接在mutation方法中进行异步操作，将会引起数据失效。所以提供了Actions来专门进行一步操作，最终提交mutation方法。

Actions中的方法有两个默认参数

context上下文(相当于箭头函数中的this)对象
payload挂载参数

例如,我们在两秒钟后执行上文中的edit方法由于setTimeout是异步操作，所以需要使用actions

actions:{
        aEdit(context,payload){
            setTimeout(()=>{
                context.commit('edit',payload)
            },2000)
        }
    }

https://www.jianshu.com/p/2e5973fe1223

Vuex

ON THIS PAGE