vuex基础

vuex的由来

在组件中如果是父子或者兄弟都可以进行一定的方法让他们联系起来，那么非关系型组件怎么联系起来呢？

vuex的作用

非关系型组件数据的共享

vuex基础-介绍

vuex是采用集中式管理组件依赖的共享数据的一个工具，可以解决不同组件数据共享问题。

结论

1. 修改state状态必须通过mutations
2. mutations只能执行同步代码，类似ajax，定时器之类的代码不能在mutations中执行
3. 执行异步代码，要通过actions，然后将数据提交给mutations才可以完成
4. state的状态即共享数据可以在组件中引用
5. 组件中可以调用action

vuex基础-初始化功能

1.建立一个新的脚手架项目, 在项目中应用vuex

开始vuex的初始化建立，选择模式时，选择默认模式

初始化

第一步：npm i vuex --save => 安装到运行时依赖 => 项目上线之后依然使用的依赖 ,开发时依赖 => 开发调试时使用
开发时依赖 就是开发的时候，需要的依赖，运行时依赖，项目上线运行时依然需要的
①首先切换到demo目录下

②npm i vuex --save或者npm i vuex -S
第二步： 在main.js中 import Vuex from ‘vuex’
第三步：在main.js中 Vue.use(Vuex) => 调用了 vuex中的 一个install方法
（对Vuex进行注册）–>通过Vuex的一个方法use去注册Vuex的功能–>Vuex实际上调用了 vuex中的 一个install方法
第四步：const store = new Vuex.Store({…配置项})
第五步：在根实例配置 store 选项指向 store 实例对象

vuex基础-state

state是放置所有公共状态的属性，如果你有一个公共状态数据 ， 你只需要定义在 state对象中
定义state

如何在组件中获取count?

原始形式- 插值表达式

将App.vue里面关于 helloword的代码删除
在模板中写<div> state的数据：{{ $store.state.count }}</div>

执行npm run serve

计算属性 - 将state属性定义在计算属性中

辅助函数 - mapState

mapState是辅助函数，帮助我们把store中的数据映射到 组件的计算属性中, 它属于一种方便用法
第一步：导入mapState
从vuex里面解构出mapState函数–>在计算属性中用
import { mapState } from "vuex";
第二步：采用数组形式引入state属性 相当于把vuex中的count引入到computed中
mapState(['count'])
相当于
count () { return this.$store.state.count }
第三步：利用延展运算符将导出的状态映射给计算属性
原因：如果里面有多个变量mapState([‘count’,‘age’,‘money’]) 所以得用到延展运算符…
...mapState(["count"]),//分别对应vuex中的count

vuex基础-mutations

state数据的修改只能通过mutations，并且mutations必须是同步更新，目的是形成数据快照
数据快照：一次mutation的执行，立刻得到一种视图状态，因为是立刻，所以必须是同步

格式说明

//定义mutations
 mutations: {
    //修改state的mutation方法  ES6的写法
    //每一个mutation方法对应都有相应的参数
    //第一个参数 state指的就是当前vuex中的state对象
    //第二个参数 payload载荷  提交mutation的方法的时候 产生的参数 他可以是任何形式的  任何类型的值
    addCount(state) {
      state.count += 1;
    },
  },

如何在组件中调用mutations

原始形式-$store

在组件中的方法中利用this.$store.commit() commit提交的意思
新建组件child-a.vue 点击按钮 调用mutations

没有参数的传递

<template>
  <button @click="addCount">+1</button>
</template>
<script>
export default {
    methods: {
    //   调用方法
      addCount () {
         // 调用store中的mutations 提交给muations
        // commit('muations名称', 2)
        this.$store.commit('addCount', 10)  // 直接调用mutations
    }
  }
}
</script>

带参数的传递

   addCount (state, payload) {
        state.count += payload
    }
    this.$store.commit('addCount', 10)

辅助函数 - mapMutations

mapMutations和mapState很像，它把位于mutations中的方法提取了出来，我们可以将它导入
在组件中把下面的导入 此时组件方法中就会拥有一个对应的addCount方法

import  { mapMutations } from 'vuex'
methods: {
    ...mapMutations(['addCount'])
}

上面代码的含义是将mutations的方法导入了methods中，等同于

methods: {
      // commit(方法名, 载荷参数)
      addCount () {
          this.$store.commit('addCount')
      }
 }

此时就可以随时调用了 带参数直接在括号里写 不带不需要写

<!-- vue方法中默认的第一个参数  事件参数对象 -->
<!-- 事件参数对象$event   传递参数直接写进去-->
<button @click="addCount($event)">+100(辅助函数)</button>
<button @click="addCount(100)">+100(辅助函数)</button>

但是请注意： Vuex中mutations中要求不能写异步代码，如果有异步的ajax请求，应该放置在actions中

vuex基础-actions

state是存放数据的，mutations是同步更新数据，actions则负责进行异步操作

定义actions

 // 异步动作
  // 从后端获取一个数  更新到state的count中
  actions: {
    // 方法
    // action方法参数
    // 第一个参数执行的上下文对象
    // context相当于组件中的this.$store  store的运行实例
    // 通过action的这个动作执行异步请求  1s过后将123提交给了addCount
    getAsyncCount(context) {
      // 做异步的请求
      // 模拟异步请求
      setTimeout(function() {
        // 获取得到一个值
        context.commit("addCount", 123);
      }, 1000);
    },
  },

怎么调用actions

原始调用 - $store

commit是提交mutation
调用action用的是dispatch

test2() {
      this.$store.dispatch("getAsyncCount");
    },

传参调用

action方法里的第二个参数是params

 addAsyncCount () {
     this.$store.dispatch('getAsyncCount', 123)
 }

actions里面

actions: {
getBsyncCount(context, params) {
      // 做异步的请求
      // 模拟异步请求
      setTimeout(function() {
        // 获取得到一个值
        context.commit("addCount", params);
      }, 1000);
    },
    }

辅助函数 -mapActions

import { mapActions } from 'vuex'
methods: {
    ...mapActions(['getCsyncCount'])
}

直接通过 this.方法就可以调用

<button @click="getCsyncCount(789)">+789(辅助函数的调用)</button>

vuex基础-getters

getters就是vuex的计算属性
除了state之外，有时我们还需要从state中派生出一些状态，这些状态是依赖state的，此时会用到getters
例如，state中定义了list，为1-10的数组，

state: {
    list: [1,2,3,4,5,6,7,8,9,10]
}

组件中，需要显示所有大于5的数据，正常的方式，是需要list在组件中进行再一步的处理，但是getters可以帮助我们实现它
定义getters
ES5的写法

 getters: {
    // getters函数的第一个参数是state
    // 必须要有返回值  ES5的写法
    filterList: function(state) {
      return state.list.filter((item) => item > 5);
    },
  },

ES6的写法

  getters: {
    // 下面这种形式更常见
    filterList: (state) => state.list.filter((item) => item > 5),
  },

怎么使用getters

原始方式 -$store

<div>{{ $store.getters.filterList }}</div>

辅助函数 - mapGetters

引入mapGetters

import { mapMutations, mapActions, mapGetters } from "vuex";

计算属性的导入进去

 computed: {
    ...mapGetters(["filterList"]),
  },

最后利用

 <div>{{ filterList }}</div>