最近在学习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'
})
}
