Vuex是什么？
Vuex是一个专为Vue.js应用程序开发的状态管理模式
Vuex是全局的状态管理
Vuex用来做什么？
Vuex用于组件之间的传值，多个组件共享数据
Vuex的数据是响应式的，当我们在A组件更新了某个状态，来到B组件，B组件会动态更新
State
State用来存储状态
在组件中获取Vuex状态
由于Vuex的状态存储是响应式的，从store实例中读取状态最简单的方法就是在计算属性中返回某个状态：
computed: {
count: () => store.state.count
// or 将状态从根组件“注入”到每一个子组件中 Vue.use(Vuex)
count: () => this.$store.state.count
},
mapState 获取方式
import { mapState } form 'vuex'
computed: {
...mapState({
// 1. 基础用法 store/index.js
isLogin: (state) => state.isLogin
// 2. 使用模块 store/modules/user.js
isLogin: (state) => state.user.isLogin
}),
},
Getters
Getters类似计算属性，只有当它的依赖发生改时才会重新求值
Getter 接受 state 作为其第一个参数：
const store = new Vuex.Store({
state: {
todos: [
{ id: 1, text: '...', done: true },
{ id: 2, text: '...', done: false }
]
},
getters: {
doneTodos: state => {
return state.todos.filter(todo => todo.done)
}
}
})
在组件中使用
computed: {
doneTodosCount () {
return this.$store.getters.doneTodosCount
}
}
mapGetters 获取方式
import { mapGetters } from 'vuex'
export default {
// ...
computed: {
// 使用对象展开运算符将 getter 混入 computed 对象中
...mapGetters([
'doneTodosCount',
'anotherGetter',
// ...
])
// 使用Modules store/user.js
...mapGetters('user',[
'increment',
'incrementBy',
// ...
])
}
}
Mutations
更改store中状态的唯一方法是mutations
mutations第一个参数是state
const store = new Vuex.Store({
state: {
count: 1
},
mutations: {
increment (state) {
// 变更状态
state.count++
}
}
})
调用方法
store.commit('increment')
你可以向store.commit传入额外的参数
// ...
mutations: {
increment (state, n) {
state.count += n
}
}
store.commit('increment', 10)
记住 Mutation 必须是同步函数
在组件中提交 Mutation
computed: {
doneTodosCount () {
return this.$store.commit('increment')
}
}
mapMutations 方式提交
import { mapMutations } from 'vuex'
export default {
// ...
methods: {
// 使用对象展开运算符将 getter 混入 computed 对象中
...mapMutations([
'increment',
'incrementBy',
// ...
])
// 使用Modules store/user.js
...mapMutations('user',[
'increment',
'incrementBy',
// ...
])
}
}
Action
Action 类似于 mutation，不同在于：
- Action 提交的是 mutation，而不是直接变更状态。
- Action 可以包含任意异步操作。
注册一个简单的 action：
const store = new Vuex.Store({
state: {
count: 0
},
mutations: {
increment (state) {
state.count++
}
},
actions: {
increment (context) {
context.commit('increment')
}
}
})
Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象，因此你可以调用context.commit提交一个 mutation，或者通过context.state和context.getters来获取 state 和 getters。
实践中，我们会经常用到 ES2015 的 参数解构 (opens new window)来简化代码
actions: {
increment ({ commit }) {
commit('increment')
}
}
在组件中触发 Action
methods: {
increment () {
this.$store.dispatch('increment')
}
}
mapActions 方式触发
import { mapActions } from 'vuex'
export default {
// ...
methods: {
// 使用对象展开运算符将 getter 混入 computed 对象中
...mapActions([
'increment',
'incrementBy',
// ...
])
// 使用Modules store/user.js
...mapActions('user',[
'increment',
'incrementBy',
// ...
])
}
}
组合 Action
有时候需要组合多个action，例如有时候需要在actionB中调用actionA
actions: {
actionA ({ commit }) {
return new Promise((resolve, reject) => {
setTimeout(() => {
commit('someMutation')
resolve()
}, 1000)
})
}
}
利用 async / await ，我们可以如下组合 action：
actions: {
actionA ({ commit }) {
return new Promise((resolve, reject) => {
setTimeout(() => {
commit('someMutation')
resolve()
}, 1000)
})
}
async actionB ({ dispatch, commit }) {
await dispatch('actionA') // 等待 actionA 完成
// ...
}
}
Modules
当应用变得非常复杂时，store 对象就有可能变得相当臃肿。
modules 将 store 分割成模块。
每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块。
const moduleA = {
state: () => ({ ... }),
mutations: { ... },
actions: { ... },
getters: { ... }
}
const moduleB = {
state: () => ({ ... }),
mutations: { ... },
actions: { ... }
}
const store = new Vuex.Store({
modules: {
moduleA,
moduleB
}
})
项目使用案例
@/store/modules/user.js ：
export default {
namespaced: true,
state: {
// 存储状态
isLogin: false
},
mutations: {
// 修改状态
SET_ISLOGIN(state, val) {
state.isLogin = val
}
},
actions: {
// 异步操作
login({ commit }, query) {
api.login({
code: query.code,
iv: query.iv
}).then(res => {
commit('SET_ISLOGIN', true)
})
}
}
}
@/store/index.js :
import Vue from 'vue'
import Vuex from 'vuex'
import user from './modules/user'
// 安装 Vuex
Vue.use(Vuex)
// 创建一个 store
export default new Vuex.Store({
modules: {
user,
// ...
}
})
@/main.js :
import Vue from 'vue';
import App from './App.vue';
import router from './router';
import store from '@/store';
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app');
