vuex的核心是store(仓库),可以管理全局状态state,state的存储是响应式的,不能直接改变store中的状态,必须显式的提交mutation,可以方便的跟踪全局状态的变化
- vuex的使用
- 可以在项目目录下建立store文件夹,文件夹下建立store.js文件,在其中定义需要的state和mutations等
// store.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex);
const s = {
state: {
data: {}
},
mutations: {}
};
export default new Vuex.Store {
...s
}
- 也可在store.js中引入其他模块的文件,如moduleA.js(文件中定义了该模块下的state和mutations等)
//moduleA.js
let state = {
dataA: []
}
let mutations = {
methodA (state, ip) {
}
}
export default {
state,
mutations
}
再在store.js中引入模块
// store.js
import moduleA from './store/moduleA'
//在之前的...s之外加上模块
export default new Vuex.Store({
...s,
modules: {
moduleA
}
});
- 在需要使用vuex的地方引入state,mutations(使用mapState,mapMutations辅助函数)
<script>
import { mapState, mapMutations } from 'vuex'
export default {
computed: {
// 模块中的state好像必须用{}语法,默认情况下mutations等放入全局,state是在模块下的
...mapState({
dataA: state => state.moduleA.dataA
})
// 若是全局的state,可用[]语法
...mapState([
'data'
])
},
methods: {
...mapMutations([
'methodA'
])
}
}
</script>
- 进阶:mutations中的方法名改为字符串,将mutations中的方法名都单独存在一个mutations-type.js文件中,方便多人协作时,对改变全局状态的mutations一目了然
//moduleA.js
import * as TYPES from './mutations-type'
let mutations = {
[TYPES.ADD_ONE](state) {
}
}
mutations-type.js中将字符串方法名定义为变量
export const ADD_ONE = 'ADD_ONE'
在用到mutations方法的组件中, 引入方法名变量并使用
// componentA
import { ADD_ONE } from '@/store/mutations-type'
export default {
...mapMutations({
addIp: ADD_ONE
})
}
}
</script>
- 使用vuex中踩的小坑:
在state中定义了一个对象数组,在mutations中的方法改变该数组时,用了lodash的_.remove() ,想从对象数组中删除某个对象,再用删除后的state中的数组渲染dom。
发现删除一个对象后, vuex的数组确实改变了,但不能重新渲染dom,说明没有响应式的改变数组,最后将remove方法改成splice删除对象,就可以正常渲染了。
通过这个小坑,说明改变vuex中的数组等复杂类型数据,最好是pop,push, shift,splice这样响应的改变,值得注意!!
网友评论