Vuex 破门而入

最近在学习vue。。。遇到vuex

Vuex是什么？

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

1.安装vuex

npm install vuex --save

2.创建一个数据仓库, 并调用vuex这个插件

在src文件夹下创建store文件夹，并创建basic.js文件，内容如下

##basic.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

var myStore = new Vuex.Store({
    state:{
        list:[11, 22, 33]
    },
    getters:{
        filterList(state){
            return state.list.filter(item => item>20)
        }
    },
    mutations:{
      // 第一个参数必须是state
      addData(state){
        state.list.push(Math.random()*10)   // 修改数据
      },
      // 允许传值
      delData(state, index){
        state.list.splice(index, 1)
      }
    },
    actions:{
        loadData(context){
            setTimeout(()=>{    /// 异步处理数据
                context.commit('addData')  // 触发mutation完成最终数据的修改操作
            }, 2000)
        }
    }
    ....
})
export default myStore

##main.js
import myStore from '@/store/basic'
new Vue({ store:myStore})

3.State 单一状态树, 用一个对象就包含了全部的应用层级状态

在组件中调用仓库中定义的数据

this.$store.state.list // 不建议直接调用
//在计算属性中，返回它要用到的数据
computed:{
 myList(){
    return this.$store.state.list
 }
}

4.Getter 有时候我们需要从 store 中的 state 中派生出一些状态

getter 在通过属性访问时是作为 Vue 的响应式系统的一部分缓存其中的

this.$store.getters.filterList

5.Mutation 更改 Vuex 的 store 中的状态的唯一方法是提交 mutation

修改数据仓库里state中数据, 必须按照预定的方式通过mutations来完成

mutation 必须是同步函数

this.$store.commit('addData')
this.$store.commit('delData', 1)  // 传值

6.Action 类似于 mutation，不同在于

Action 提交的是 mutation，而不是直接变更状态。
Action 可以包含任意异步操作。如果数据的操作是异步的，必须通过actions来处理
a.定义action
b.触发action

this.$store.dispatch('loadData')

7.Modules数据非常多，多个数据仓库怎么办？通过模块化的方式来处理多个state

步骤1.如何创建一个模块
在当前工程的store目录下，创建一个文件夹modules，在该文件夹下创建多个模块cart.js user.js ...

// store/modules/cart.js // 创建模块
export default {
  state:{
      cartId:101
  },
  mutations:{} ...
}

步骤2.如何调取模块

import CartModule from './mudules/cart'
new Vuex.Store({
    modules:{
        cart:CartModule
    }
})

步骤3.如何在组件中操作子模块中的数据

this.$store.state.cart.cartId   // 中间多了一层cart

8.辅助函数 对象展开运算符

mapState 当一个组件需要获取多个状态时候，将这些状态都声明为计算属性会有些重复和冗余。
mapGetters 辅助函数仅仅是将 store 中的 getter 映射到局部计算属性
mapMutations 辅助函数将组件中的 methods 映射为 store.commit 调用（需要在根节点注入 store）。

import {mapState, mapGetters, mapMutations} from 'vuex'
computed:{
     ...mapState(['list']),     //...mapState({myList:'list'})
     ...mapGetters({filterList:'filterList'})
}
methods:{
  ...mapMutations({
       deleteFromList:'delData'
   })
}

官网：https://vuex.vuejs.org/zh/installation.html