vuex的使用

1.vuex简介

vuex是专门用来管理vue.js应用程序中状态的一个插件。他的作用是将应用中的所有状态都放在一起，集中式来管理。需要声明的是，这里所说的状态指的是vue组件中data里面的属性。

2… vuex 的核心概念

2.1 store

vuex 中最关键的是store对象，这是vuex的核心。可以说，vuex这个插件其实就是一个store对象，每个vue应用仅且仅有一个store对象。

2.2 创建store（Vue组件）

// 创建并导出整个项目的数据仓库，将多组件公用的数据
//放置到此对象里。
export default new Vuex.Store({
 state: {
    // 存放状态
  },
  getters: {
    // state的计算属性
  },
  mutations: {
    // 更改state中状态的逻辑，同步操作
  },
  actions: {
    // 提交mutation，异步操作
  },
  // 如果将store分成一个个的模块的话，则需要用到modules。
   //然后在每一个module中写state, getters, mutations, actions等。
  modules: {
    a: moduleA,
    b: moduleB,
    // ...
  }
})

可见，store是Vuex.Store这个构造函数new出来的实例。在构造函数中可以传一个对象参数。这个参数中可以包含5个对象：

1.state – 存放状态

2.getters – state的计算属性

3.mutations – 更改状态的逻辑，同步操作

4.actions – 提交mutation，异步操作

5.mudules – 将store模块化

关于store，需要先记住两点：

1. store 中存储的状态是响应式的，当组件从store中读取状态时，如果store中的状态发生了改变，那么相应的组件也会得到更新；

2. 不能直接改变store中的状态。改变store中的状态的唯一途径是提交(commit)mutations。这样使得我们可以方便地跟踪每一个状态的变化。

3.组件中使用vuex

3.1调用数据–state

1.在store下的index.js文件下定义数据

2.控制台输出当前this可以找到定义的number

3.组件中调用

3.2 调用方法–mutations

1.mutations中定义一个addNumber()

组件不能直接使用mutations中的方法，需要写一个监听事件,通过commit()获取

2.调用监听事件

3.3 调用异步方法–actions

下面通过一个实例进行使用

1.在 actions中定义setDz方法通过axios获取段子
api：https://api.apiopen.top/getJoke?page=1&count=2&type=video

2.在state中定义一个空对象，在mutations中添加一个事件用于将请求到的数据放入state下的空对象中，需要注意的是这一步赋值的过程必须在mutations属性中完成。

 state: {
    duanzi: ''
  },

value值来自于 content.commit(‘setDuanzi’, response.data.result)中传递的参数

 mutations: {

    setDuanzi (state, value) {
      state.duanzi = value
    }
  },

3.组件中调用vuex中的异步方法
Action.vue

<template>
    <div>
        action组件
    <button @click = setDz>生成段子</button>
    <ul>
      <li v-for="(item,index) in duanzi"  :key='index'>{{index+1}} -- {{item.text}}</li>
    </ul>
    </div>
</template>

这里使用了mapState, mapActions

import { mapState, mapActions } from 'vuex'
export default {
  name: 'action',
  computed: {
    ...mapState({
      duanzi: (state) => state.duanzi // 第二种写法
    })
  },
  methods: {
    // 方法一
    // getDuanzi () {
    //   this.$store.dispatch('setDz')
    // },
    // 方法二
    ...mapActions({
    // 将 `this.setDz()` 映射为 `this.$store.dispatch('setDz')
      setDz: 'setDz'
    })
    // console.log(this)
  }
}

页面效果