Vue — VueX

一、VueX概述

1.概述：

vuex是一个vue的状态管理工具，状态就是数据；可以帮助我们管理vue通用的数据（多组件共享的数据）

2.场景：

（1）某个状态在很多个组件中使用 例如 个人信息 

（2）多个组件共同维护一份数据 例如 购物车

3.优势：

（1）共同维护一份数据，数据集中化管理

（2）响应式变化

（3）操作简单（vuex提供了函数方法）

二、构建VueX【多组件数据共享】

1.创建项目 vue create  app

2.创建一个空仓库

（1）安装vuex   vue2.0安装vuex@3   vue3.0安装vuex@4

npm i vuex@3

（2）新建vuex模块文件

（3）创建仓库

//引入核心包
import Vuex from 'vuex'
import Vue from 'vue'

//插件注册
Vue.use(Vuex)

//创建仓库

　const store = new Vuex.Store()

export default store

（4）main.js导入挂载

import Vue from 'vue'
import App from './App.vue'
import store from './store'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
  store
}).$mount('#app')

三、使用store仓库

1.state状态

（1）提供数据：

State提供唯一的公共数据源，所有共享的数据都要统一放到Store中的State存储。在state对象中可以添加我们要共享的数据。

（2）使用数据：

-通过store直接访问（模板中、组件逻辑中、js中）

-通过辅助函数简化

<template>
  <div class="box">
    <div class="boxA">
      A组件
      <p>{{ title }}
        {{ count }}</p>
    </div>

  </div>
</template>

<script>

import {mapState} from 'vuex'

export default {

  computed:{
    ...mapState(['title','count'])
  }
}
</script>

（3）修改数据 （mutations）

vuex同样遵循单项数据流，组件中不能直接修改仓库的值

2.mutations

（1）定义mutations对象，对象中存放修改state的方法

const store = new Vuex.Store({
    strict : true,
    state : {
        title : '共享标题',
        count : 100
    },
    mutations : {
        //第一个参数是state
        addCount(state){
            state.count+=1
        }
    }
})

（2）组件中提交调用mutation

<button @click="add">count+1</button>

add(){
      this.$store.commit("addCount") }

（3）传参 只能额外传递一个参数

 mutations : {
        //第一个参数是state
        addCount(state,n){
            state.count+=n
        }
    }

<button @click="add(1)">count+1</button>
<button @click="add(5)">count+5</button>
<button @click="add(10)">count+10</button>
<button @click="add(20)">count+20</button>

this.$store.commit("addCount",n)

（3）mapMutations（映射store的方法）

import {mapState,mapMutations} from 'vuex'

export default {

  computed:{
    ...mapState(['title','count'])
  },
  methods :{
    ...mapMutations(['addCount','reduceCount'])
  }
}

<button @click="addCount(20)">count+20</button>
<button @click="reduceCount(20)">count-20</button>

3.actions （处理异步操作）

mutationa是同步的

（1）提供action方法

const store = new Vuex.Store({
    strict : true,
    state : {
        title : '共享标题',
        count : 100,
        number : 66
    },
    mutations : {
        //第一个参数是state
        addCount(state,n){
            state.count+=n
        },
        reduceCount(state,n){
            state.count-=n
        },
        changeNum(state,num){
            state.number = num
        },

    },
    actions : { //处理异步，不能直接操作state
        //context：上下文 没有分模块，可以当做store仓库
        //context.commit('mutations名字',参数)
        changeCountAsync(context,num){
            setTimeout(()=>{
                context.commit('changeNum',num)

            },2000)
        }
    }
})

（2）页面中dispath调用

<button @click="changeAsync">异步</button>
 methods :{
    changeAsync(){
      this.$store.dispatch('changeCountAsync','8')
    }
  }

（3）mapActions（映射actions的方法，映射到组件的methods）

  <button @click="changeCountAsync(9999999)">异步</button>

<script>

import { mapState, mapMutations, mapActions } from 'vuex'

export default {

  computed: {
    ...mapState(['title', 'count'])
  },
  methods: {
    ...mapMutations(['addCount', 'reduceCount']),
    ...mapActions(['changeCountAsync'])
  }
}
</script>

4.getters（类似计算属性）

除了state，我们还需要从state中派生出一些状态，这些状态是依赖state的，此时会用到getters

（1）定义getters

    getters : {
        //形参第一个参数就是state
        //必须有返回值 返回值就是getters的值
        filterList(state){
            return state.list.filter(item=>item>5)
        }
    }

（2）访问getters

<ul>
   <li v-for="(item,index) in $store.getters.filterList" :key="index">{{ item }}</li>
</ul>

（3）mapGetters

import { mapState, mapMutations, mapActions ,mapGetters} from 'vuex'
 computed: {
    ...mapState(['title', 'count','list']),
    ...mapGetters(['filterList'])
  },

<li v-for="(item,index) in filterList" :key="index">{{ item }}</li>