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这样响应的改变，值得注意！！
