本文系统介绍vuex的全部内容
-
为什么用vuex
组件通信知道吧，相信很多同学，刚学的时候很难懂，实时上在实际应用中，大型项目如果使用最原始的组件通信会非常的麻烦，主要体现在多层嵌套的组件之间的通信，使用vuex可以很方便的处理和维护state -
开始
1.vuex的特点
**当store容器中的数据发生变化了，那么组件中的数据也会跟着发生变化
**更改store中的state值，必须使用commit
2.安装
npm install vuex --save
Vue.use(Vuex)
3.基本使用
const store = new Vuex.Store({
state: {
count: 0
},
mutations: {
increment(state){
state.count++
}
}
}) -
state
在单文件系统中，组件都是单独的文件如果想访问到vuex的store中的数据需要重复的导入store文件，非常麻烦，可以使用如下方式，只需导入一次即可
const app = new Vue({
el: '#app',
store,
...
})
就是将store实例，直接赋值给vue根组件的store属性，然后在此根组件下面所有的子组件都可以通过this.$store.state访问到store中的state
一般获取到store中的某个属性值，会在组件中使用计算属性重新声明一个属性，如下
const Counter = {
template: '<div>{{count}}</div>',
computed: {
count(){
return this.$store.state.count
}
}
}
如果你需要的属性值，很多，那么你叫重复的写很多类似的代码，很麻烦，这时可以使用mapState辅助函数，使用方法如下
import {mapState} from 'vuex' //导入辅助函数
export default {
computed: mapState({
count: state => state.count // 不做任何处理直接导入
count: 'count' // 和上面的作用一样
count // 同名的可以直接简写
count(state){
return state.count + this.otherValue
} // 做特殊处理
})
}
上面可以看到一个mapState将一个computed全占了，这时我要是有自己的计算属性可以使用对象展开运算符
computed: {
localComputed(){},
...mapState({
//...
})
} -
getters
有些store中的state，并不是组件中需要的数据，而组件要的是基于这个state通过计算后的值，这时可以在store中使用getters选项，这和组件的computed的功能是一模一样的
const store = new Vuex.Store({
state: {
a: 1
},
getters: {
incre: state => {
return state.a + 1
}
}
})
那么incre就是2了
可以通过store.getters.a或者this.$store.a访问
还可以传递其他的getters，后面具体讲解
incre: (state,getters) => {
return getters.a + 1
}
mapGetters函数的使用
和mapState一样
import { mapGetters } from 'vuex';
export default {
computed: {
...,
...mapGetters([
'incre'
])
}
} -
mutations
mutation就是用来同步的修改state中的数据的
const store = new Vuex.Store({
state: {
count: 1
},
mutations: {
increment(state,value){
state.count++
}
}
})
调用mutation中的方法需要 store.commit('increment')
传递数据 store.commit('increment', 10)
为了保证好的代码风格，可以统一的传递对象
mutations: {
increment (state,payload) {
state.count += payload.amount
}
}
store.commit('increment',{
amount: 10
})或者
store.commit({
type: 'increment',
amount: 10
})
注意：mutation只能写同步的函数，至于原因是vue的devtool无法捕捉状态，这个devtool几乎用不上
使用mapMutations函数
在组件中使用mutations中的函数，最好都放在methods里面，方便管理
import { mapMutations } from 'vuex'
methods: {
...,
...mapMutations([
'increment'
])
} -
actions
其实actions的功能和methods类似，可以用来处理异步的函数，然后将结果通过mutation传递
actions: {
incre(context){
context.commit('increment')
}
} // context 具有和store相同的属性和方法
也可以使用es6的语法
actions: {
incre({commit}) {
commit('increment')
}
}
触发action中的方法 store.dispatch('incre')
或者
store.dispatch('incre',{
amount: 10
})
或者
store.dispatch({
type: 'incre',
amount: 10
})
使用mapActions函数
import { mapActions } from 'vuex';
export default {
...,
...mapActions([
'increment'
])
} -
modules
这部分内容其实就是将如何将一个store拆分成多个小的store
const moduleA = {
state: {...},
...
}
const store = new Vuex.Store({
modules: {
a: moduleA
}
})
这就把A模块合并到store中了，通过store.state.a访问moduleA的state
你要清楚，本质上着就是合并对象，所以你可以使用平常的methods和mutations等使用方法，因为他们实际上就是合并成了一个methods或者mutations等，所以这样就会有一个问题，子模块和子模块、主模块之前的命名冲突问题，但是注意，细心的同学可能发现了，上面介绍的store.state.a这样不可能出现命名冲突，这是对的，因为vue默认只对state做了分开的处理，所以你在子模块中的actions这类的属性中访问到主模块store中的数据必须传递第三个参数rootState，如下
const moduleA = {
actions: {
incre({state,commit,rootState}) {
...
}
}
}
要解决上面提到的命名冲突的问题就要使用到命名空间，如下
const moduleA = {
// 添加下面这句话，这个模块就是独立的了，不会和外界发生冲突
namespaced: true,
// state不会受到命名空间的影响
// 在外界要访问到此模块的getters,actions等，需要添加路径
getters: {
isAdmin(){....} // getters['moduleA/isAdmin']
}
}
在命名空间中访问主模块的数据要添加 rootState,rootGetters
细节自查官网，用的真心很少，不同的模块的actions这类的名字能取成一样的也是奇葩
结语
还有一部分内容对于开发来说，没有任何作用，学习就要把自己宝贵的时间放在对你最有用的东西上面
这部分内容是我关于vue的最后的一篇知识归纳，以后将全身心的投入到react的学习当中