Vuex的使用(概述)

1.vuex概述

vuex相当于一个数据共享的中间层，存储到vuex中的数据一般都是用于组件之间传值使用的。

2.vuex的安装

安装到生产环境：npm install vuex --save

3.导入vuex包（main.js）

import Vuex from 'vuex'

Vue.use(Vuex)

4.创建store对象（src文件夹下新建一个store文件夹，新建index.js文件）

const store = new Vuex.Store({
    // state中 存储的就是共享的数据
    state:{
        mydata: '今天是个好日子'
    }
})

 

5.将store对象挂载到vue实例(getter、mutation、action同上)：

new Vue({
    el: '#app', // 实例
    render: h => h(app), // 渲染app根组件
    router, // 挂载路由
    store
})

 

6.访问store中的state中的数据(源数据):

方法一：直接在组件中使用this.$store.state.名称进行访问，当然，在template中可以省略this

方法二：①在组件中按需导入：import { mapState } from 'vuex'
              ②将数据映射为当前组件的computed计算属性：

computed: {

    ...mapState(['mydata'])
}

7.getters(不能更改源数据)：

①getters对源数据处理得到新值，可以认为是 store 的计算属性。

②store中的数据变化，getters中的数据也跟着变化。

③定义getters对象：

④使用getters：

方式一：直接在组件中使用this.$store.getters.方法名进行访问

方式二：

第一步： 在组件中按需导入：import { mapGetters } from 'vuex'
第二步： 将数据映射为当前组件的computed属性：

computed: {

    ...mapGetters(['getGetters'])
}

8.mutations(唯一可以修改store中的数据的方式，同步操作)：

①定义mutations对象（函数默认接收state作为第一个参数）：

②组件中methods中使用（不携带参数）：

getMutation () {
      // 触发mutations的方式一,changeState是定义在mutations中的函数名称
      this.$store.commit('changeState')
 }

 

---

③定义mutations时进行传参：

④组件中调用mutations（携带参数）：

---

⑤触发mutations的第二种方式：

第一步： 在组件中按需导入：import { mapMutations } from 'vuex'
第二步： 将数据映射为当前组件的methods函数：

methods: {

    ...mapMutations(['changeState'])
}

第三步：在methods中定义的函数里直接使用：

9.actions（异步操作）:

①在actions中不能直接修改state中的数据，要通过context.commit()触发mutations才可以

②定义actions对象（不携带参数）：

③在组件中触发actions（不携带参数）：

---

④定义actions携带参数：

⑤在组件中使用传参：

⑥触发actions的第二种方式：

第一步： 在组件中按需导入：import { mapActions } from 'vuex'
第二步： 将数据映射为当前组件的methods函数：

methods: {

    ...mapActions(['changeStateAsync3'])
}

第三步：

方式一：在methods中定义的函数里直接使用

方式二：直接将事件的名称换成actions中的方法名

视频地址：https://www.bilibili.com/video/av83862709