Vuex
Vuex是什么
Vuex是一个针对Vue.js开发的状态管理模式。说简单点儿就是一个工具,可以管理(修改或设置)所有组件用到的数据,而不需要借助之前的event bus或者props在组件间传值。
Vuex使用场景
大型单页应用程序,存在多组件共享数据的时候,需要用到
Vuex 核心内容
store
(一个容器对象,存储Vuex中的state,mutations,actions,getters等)
state (一个保存数据的对象,对象中的数据可以供所有组件使用)
// 1. 定义
const state = {
count: 0
}// 2. 获取state中的值
this.$store.state.count// mapState 辅助函数获取多个state的值
import { mapState } from 'vuex'
computed: mapState({// 箭头函数可使代码更简练 count: state => state.count, // 传字符串参数 'count' 等同于 `state => state.count` countAlias: 'count',
})
computed: mapState([
// 映射 this.count 为 store.state.count
'count'
])// 3. 与组件的计算属性混合使用
computed: {
localComputed () { / ... / },
// 使用对象展开运算符将此对象混入到外部对象中
...mapState({// ...
})
}
mutations
(一个对象,保存的是更改state的函数,也只有它能更改state中的值,触发方式this.$store.commit('函数名',参数))
// 1. 定义 const mutations = { increment (state) { state.count++ } } // 2. 触发 this.$store.commit('increment') // 3. 传递参数,通常参数应该是一个对象 mutations: { increment (state, n) { state.count += n } } this.$store.commit('increment', 10) // 4. 在组件的方法中使用 methods: { ...mapMutations([ 'increment', // 将 `this.increment()` 映射为 `this.$store.commit('increment')` // `mapMutations` 也支持载荷: 'incrementBy' // 将 `this.incrementBy(amount)` 映射为 `this.$store.commit('incrementBy', amount)` ]), ...mapMutations({ add: 'increment' // 将 `this.add()` 映射为 `this.$store.commit('increment')` }) }
actions
(一个对象,保存的是触发mutations的函数,让mutations去修改state中的值)
// 1. 定义 const actions = { increment: ({ commit }) => commit('increment') } // 2. 触发 this.$store.dispatch('increment') // 3. 参数支持 this.$store.dispatch('incrementAsync', { amount: 10 }) // 4. 组件的方法中使用 methods: { ...mapActions([ 'increment', // 将 `this.increment()` 映射为 `this.$store.dispatch('increment')` // `mapActions` 也支持载荷: 'incrementBy' // 将 `this.incrementBy(amount)` 映射为 `this.$store.dispatch('incrementBy', amount)` ]), ...mapActions({ add: 'increment' // 将 `this.add()` 映射为 `this.$store.dispatch('increment')` }) }
getters
(一个对象,保存的是一些类似与计算属性的函数,可以通过他们得到任何依赖于state的新的数据)
// 1. 定义 const getters = { evenOrOdd: state => state.count % 2 === 0 ? 'even' : 'odd' } // 2. 使用 this.$store.getters.evenOrOdd // 3. 使用其他getters作为参数 getters: { // ... doneTodosCount: (state, getters) => { return getters.doneTodos.length } } // 4. 组件内使用 export default { // ... computed: { // 使用对象展开运算符将 getter 混入 computed 对象中 ...mapGetters([ 'doneTodosCount', 'anotherGetter', // ... ]) } }
使用vuex
npm install vuex -S
// store.js import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) const state = {} const mutations = {} const actions = {} const getters = {} export default new Vuex.Store({ state, getters, actions, mutations }) // app.js import store from './store' new Vue({ el: '#app', store, render: h => h(Counter) })