定义
首先链接官方文档vuex
一言以蔽之,vuex是状态管理的的方法,能够实现跨页面传参。
主要分为三个模块:
state:数据区,所有共享的状态/数据,所有组件都可以取到其中的数据(定义数据)
mutations:用于改变state的状态(定义改变数据的方法)
action:调用mutation来改变state中的状态,这也是改变state值的唯一方法(调用方法)
vuex的示例
首先需要安装vuex
cnpm install vuex --save
// --save表示将保存配置信息到package.json的dependencies节点中
建立store.js
文件
// store.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
number: 1
},
mutations: {
'SET_NUMBER': (state, newNumber) => {
state.number = newNumber
}
},
actions: {
setNumber: ({ commit, state }, newNumber) => {
// return 返回一个promise对象
return commit('SET_NUMBER', newNumber)
}
}
})
在main.js
中引入store
// main.js
import Vue from 'vue'
import App from './App.vue'
import store from './store'
Vue.config.productionTip = false
new Vue({
store,
render: h => h(App),
}).$mount('#app')
在一个vue文件中使用state
// App.vue (示例)
mounted() {
// 此处执行action中定义的方法,将number的值赋为100
this.$store.dispatch('setNumber', 100).then(() => {
console.log(this.$store.state.number)
})
}
控制台输出100
模块化方法
以上只是vuex的最基本应用,当一个项目中存在大量state状态时,以上做法就显得比较低效了。因此需要引进vuex的模块化方法。
创建store
文件夹,建立index.js
文件,在store
文件夹下建立modules
文件夹,存放多种类型的state
。
mapGetters
mapGetters
属于语法糖,getters
用于快速获取对应的state
中的值。
目录结构为:
|--store
|-modules
|-money.js
|-index.js
|-getters.js
具体的调用方法为:
修改main.js
中的配置,主要为了引入store
// main.js
import Vue from 'vue'
import App from './App.vue'
import store from './store'
Vue.config.productionTip = false
new Vue({
store,
render: h => h(App),
}).$mount('#app')
// money.js
const money = {
state: {
number: 1
},
mutations: {
'SET_NUMBER': (state, newNumber) => {
state.number = newNumber
}
},
actions: {
setNumber: ({ commit, state }, newNumber) => {
// return 返回一个promise对象
return commit('SET_NUMBER', newNumber)
}
}
}
export default money
getters用于快速读取state中的值
// getters.js
const money = {
number: state => state.money.number
}
export default money
使用mapGetters之后,相当于在当前组件中定义了此变量,可通过{{number}}
和this.number
获取vuex中的值。
// App.vue
import { mapGetters } from 'vuex'
export default {
computed: {
...mapGetters(['number'])
},
mounted() {
this.$store.dispatch('setNumber', 100).then(() => {
// 两者输出的内容相同,第二种方法更加简单
// console.log(this.$store.state.money.number)
console.log(this.number)
})
}
}
至于为什么要放在computed
中,是为了便于实时更新state
的值。如果单纯通过data接收,那么对应的值就不会实时更新。
mapActions
与mapGetters
类似,mapActions
主要针对action
中的方法进行引入。mapActions
写在methods
中,引入的方法相当于在当前组件中定义的方法。
import { mapGetters, mapActions } from 'vuex'
export default {
name: 'app',
computed: {
...mapGetters(['number', 'name']),
},
methods: {
...mapActions(['setNumber', 'setName'])
},
mounted() {
this.setNumber(100).then(() => {
console.log(this.number)
})
}
}
Mixins
当面临大量的mapGetters 与mapActions 时,在每一个组件中逐个引入就会变得异常麻烦,此时需要借助Mixin
。在mixin中定义这些需要被大量复用的变量与方法。
建立mixin.js
import { mapGetters, mapActions } from 'vuex'
const moneyMixin = {
computed: {
...mapGetters([
'number',
'name'
]),
},
methods: {
...mapActions([
'setNumber',
'setName'
])
}
}
export { moneyMixin }
任意vue组件中
import { moneyMixin } from './mixin.js'
export default {
mixins: [moneyMixin],
mounted() {
this.setNumber(200).then(() => {
console.log(this.number)
// 100
})
}
}
网友评论