vuex 使用
在vue中组件的通信是基于事件系统,一旦应用复杂的到一定程度,双向数据流会使数据出现意想不到的问题
vuex出现刚好解决了上述问题,以单向数据流让数据的流动可跟踪,以保证数据在变化过程中不会出现不可控的状态雪崩问题
vuex主要涉及的几个概念如下:
-
state
-
getters
-
mutations
-
actions
-
modules
store 介绍
store包含state，mutations，actions，getters
mutations 是用来改变state数据的，参数 (state, getters, rootState) ，mutation只能为同步操作，所以最好是数据操作，不放业务逻辑，通过commit触发
action用来commit mutaion 从而触发数据改变，触发action 通过dispatch action，参数{state, commit, rootState }，可以异步操作, 通过dispatch触发，返回promise，
getters 用来处理数据，return 一些派生状态的，例如filter，map之后获取某些值，就像计算属性中定义的值一样，依赖state而变化
注意：state是响应式的，只能通过commit mutation 来改变状态，不能直接手动更新
mutation使用:
mutationTypes中汇总了mutations的名称，更直观，当然也可以不用
const store = new Vuex.Store({
state: {
count: 1
},
mutations: {
do (state, payload) { // payload是传参对象
state.username = payload.val
}
},
actions: {
do ({state, commit, rootState }) { //state 局部状态，rootState是全局状态
ajax().then(() => {
commit('do')
})
}
}
})
直接触发mutation，此功能多用在actions中，actions外可以如下使用：
store.commit('do', {'a': 'hhhh'})
store.commit('do', {'a': 'hhhh'}, {root: true}) //全局do
store.dispatch('do', {'a': 'hhh'}).then() //传参，并且返回的是promise对象
store.dispatch('do', {'a': 'hhh'}, {root: true} //全局do
目录结构和说明
-vuex
-| actions.js //存放所有根级action
-| getters.js //存放所有根级getters
-| index.js //存放所有根级state
-| mutations.js
-| mutationsTypes.js
--login // 不同的module，存放分模块数据
---| actions.js
---| getters.js
---| index.js
---| mutations.js
---| mutationsTypes.js
分模块状态
项目中用了命名空间，区分不同模块和子模块目录。在vuex中，有全局状态，也有不同的module局部状态，所以在使用时需要注意不同的命名空间
状态导入app
根组件已经注册了store，使用可以this.$store，
app里使用的时候，通过和computed绑定，可以获取相应式的变化
基本用法：
computed: {
test () {return this.$store.state.test} // 访问根目录下的
test () {return this.$store.state.login.test} // 访问各个module目录下的,此处为login模块下
}
用辅助函数导入所有的状态 mapState mapGetters
import {mapState} from 'vuex'
computed: {
...mapState ({
test () {return this.$store.state.test} // 访问根目录下的
})
...mapGetters ({
testBig () {return this.$sotre.getters.testBig} // 根目录下的
})
}
methods: {
...mapActions ({
testAction () {return this.$sotre.actions.testAction} // 根目录下的
})
}
推荐：简易写法
import {mapState} from 'vuex'
computed: {
...mapState ({
testRoot: 'test' // 访问根目录下的
test: 'login/test' //login模块下的
})
...mapGetters ({
testBig: 'testBig' // 根目录下的
test: 'login/test' //login模块下的
})
}
methods: {
...mapActions({
testAction: 'login/testAction',
rootactions: 'rootactions'
})
}
跟v-model绑定
需要在coputed里设置set和get， 不然报错
<input type="text" v-model="msg">
computed {
msg: {
set (val) {
this.$store.commit('updateMsg', val)
},
get () {
return this.$store.state.msg
}
}
}
网友评论