vuex是什么鬼？
如果你用过redux就能很快的理解vuex是个什么鬼东西了。他是vuejs用来管理状态的插件。
你可以在需要使用的地方使用vuex，在不需要的地方继续用局部状态。
不过会一招飞龙在天，再学一招亢龙有悔也是很好的= = ,摆好姿势，学起来~
使用
创建store.js
import Vuex from 'vuex'
Vue.use(Vuex) //这个必须的！告诉vue使用vuex
创建 state
const state={
count:0,
todos:[
{id:1,text:'内容',done:true},
{id:2,text:'内容',done:false},
]
}
创建 actions
const actions={
increment(context){
context.commit('incrementNew');
}
}
或者
const actions={
increment({commit}){
commit('incrementNew');
}
}
创建 mutations
const mutations={
incrementNew(state){
state.count++
}
}
创建getters
const getters={
toDo(state){
return state.todos.filter(todo=>todo).length;
}
}
store
将创建好的state、mutations、actions、getters传入Store
export default new Vuex.Store({
state,
mutations,
actions,
getters
})
把store传递给根组件，让所有子组件都能获取到。子组件通过this.$store访问。
例如:
<div>{{this.$store.state.count}}</div>
看到这里你大概清楚 vuex由哪几个部分构成。下面开始详细介绍。
理解state
组件data函数中的状态称为局部状态，为了能让一些状态能让所有组件都拿到，所以我们将状态通过vuex管理，就是需要创建state。
在组件中访问state有以下几种方式:
1.直接使用$store
<div>{{this.$store.state.count}}</div>
在计算属性中返回某个状态,只要state改变，就会重新计算 触发Dom更新
computed:{
count(){
return this.$store.state.count
}
}
使用:
<div>{{count}}</div>
2.使用mapState辅助函数
import { mapState} from 'vuex'
computed:{
...mapState({
countAlias:'count'
})
}
使用:
<div>{{countAlias}}</div>
理解getters
是store的计算属性,getters接收state作为第一个参数,让我们对state进行一些处理。
getters会有计算缓存，依赖的数据没有改变则不重新计算。
在组件中访问getters有以下几种方式:
1.直接使用$store
<div>{{this.$store.getters.toDo}}</div>
2.使用mapGetters辅助函数
import { mapGetters} from 'vuex';
computed:{
...mapGetters([
'toDo'
])
}
使用:
<div>{{toDo}}</div>
理解 actions
提交mutation,可以包含任意异步操作
在组件中访问actions有以下几种方式:
1.使用$store
<div>{{this.$store.dispatch('increment')}}</div>
2.使用mapActions辅助函数
import { mapActions} from 'vuex';
methods:{
...mapActions([
'increment'
])
}
理解mutations
修改state的唯一方式就是提交mutations,它接收state为第一个参数
在组件中访问mutations有以下几种方式:
1.使用$store
<div>{{this.$store.commit('incrementNew')}}</div>
2.使用mapMutations辅助函数:
import { mapMutations} from 'vuex';
methods:{
...mapMutations([
'incrementNew'
])
}
action和mutation的区别
action类似mutation，区别在于:
1.action提交的是mutation，不能直接修改state
2.action可以包含异步操作，mutation不可以，mutation必须是同步函数(因为任何在回调函数中进行的的状态的改变都是不可追踪的)。
下面是action异步操作demo:
const actions={
increment(context){
setTimeout(()=>{context.commit('incrementNew');},1000);
}
}
使用理解：
1.用户触发actions,actions提交mutations，mutations接收state为第一个参数并且可以修改state返回一个新的state。
2.actions并不是提交mutations的唯一方式，也可以通过$store直接commit或者使用mapMutations辅助函数。
3.actions支持异步操作，mutations必须是同步函数。
进阶:
使用单一状态树导致所有状态集中到一个很大的对象中，当store越来越大会臃肿不堪。
理解Modules
vuex允许将store分割到模块,每个模块有自己的state、actions、mutations、getters。
const modulesA={
state:{//.....},
mutations:{//.....},
actions:{//.....},
getters:{//....}
}
const modulesB={
state:{//.....},
mutations:{//.....},
actions:{//.....},
getters:{//....}
}
const store=new Vuex.Store({
modules:{
a:modulesA,
b:modulesB
}
})
store.state.a// -> moduleA 的状态
store.state.b// -> moduleB 的状态
动态注册模块
使用registerModule动态注册模块
store.registerModule('myModule',{
// ...
})
卸载模块
不能删除在store中声明的模块
store.unregisterModule(myModule)
注意:
vuex中的辅助函数借助stage2的Object Rest Operator,vue-cli脚手架的package中没有此依赖。
需要安装依赖: npm i babel-preset-stage-2 --save ，否则当你使用mapActions等辅助函数的时候会报错。
安装完依赖接下来在.babelrc 配置
{
"presets": [
["es2015", { "modules": false }]
],
"plugins": ["transform-object-rest-spread"]
}
网友评论