概念
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化
作用
专门解决传值问题
使用
安装方法:
npm install vuex
使用方法:
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
state: {
count: 0
},
mutations: {
increment (state) {
state.count++
}
}
})
//main.js
const app = new Vue({
el: '#app',
// 把 store 对象提供给 “store” 选项,这可以把 store 的实例注入所有的子组件
store,
})
五大核心概念
state
用来存放共享数据的
const store = new Vuex.Store({
state: {
count: 10,
like:["篮球","足球"],
movie:{"name":"速度与激情",actor:"保罗沃克"}
}
})
getters
类似于计算属性 ,默认接受第一个参数,该参数是所有的state,其他的用法跟computed是一模一样的
第二个参数是所有的getters
基本用法
index.js
const store = new Vuex.Store({
state: {
count: 10
},
getters:{
money(state){
return state.count+"元"
}
}
})
APP.vue
mounted(){
console.log(this.$store.getters.money)
}
getters也可以传参
getters:{
meiyuan:state=>(rate)=>{
return state.rmb/rate
}
}
getters的第二个参数:所有getters
getters:{
money(state,getters){
return getters.info+"元"
},
info(state){
return state.count*2
}
}
muttons
1.修改state数据的唯一办法就是提交mutation
2.mutations中修改的数据如果是引用类型,一定注意要完整的赋值(不能单独修改某一项)
基本用法
const store = new Vuex.Store({
state: {
count: 1
},
mutations: {
increment (state) {
// 变更状态
state.count++
}
}
})
export default store
调用:
store.commit('increment')
为什么Mutation 必须是同步函数?
具体原因:为了让devtools 工具能够追踪数据变化
具体原因详解
每个mutation执行完成后都会对应到一个新的状态变更,这样devtools就可以打个快照存下来(每次状态的改变都会生产一个全新的 state 对象),然后就可以实现 “time-travel” 了。如果mutation支持异步操作,就没有办法知道状态是何时更新的,无法很好的进行状态的追踪,给调试带来困难。
actions
Action 类似于 mutation,不同在于: Action 提交的是 mutation,而不是直接变更状态。 Action 可以包含任意异步操作。
mutaions actions流程
modules
基本用法
Vuex 允许我们将 store 分割成模块(module)。每个模块拥有自己的 state、mutation、 action、getter
单独定义一个模块跟我们之前定义store是一样的
辅助函数
语法
import { mapState } from 'vuex'
//mapState函数返回值是一个对象