Vuex文档记录

主要是自己的看文档的一些笔记，无实际大意义

一些基本概念

Vuex使用单一状态树，一个对象包含了全部应用层级状态。所以每个应用仅仅包含一个store实例。

从store实例中读取状态再计算属性computed中返回某个状态

当数据发生变化的时候，都会重新求去计算属性，并且触发更新相关联的DOM。

这种模式需要依赖全局状态单例。可以从根组件注入到每一个子组件中

//store.js
Vue.use(Vuex)
export default new Vue.Store({
    state,
    actions,
    mutations,
    getters
})
// main.js
import store from './store';
const vm = new Vue({
    el: "#app",
    store,
    ....
})

Vue.use()

用来注册插件，注册插件之后就可以在所有Vue文件中使用，例如：Vuex、vue-router

state

state中主要存放一些初始数据

获取：如果已经全局注册了插件，可以通过：

（如果使用了modules，则再加一层即可

this.$store.state.xxx
this.$store.modelA.xxx

mapState辅助函数

如果一个组件需要获取多个状态，这个状态都如上去获取会比较麻烦，我们可以使用mapState将需要的数据注入到computed属性中

<script>
	import { mapState } from 'vuex'
    export default {
        computed:{
            // 使用module之后的引入，如果没有，去掉第一个参数，第二个参数变为一个对象即可，相当于一种解构赋值（个人理解）
            ...mapState("moduleName",['getA','getB']),
            // other computed属性
        },
    }
</script>

Getter

作用：获得state的数据

getter也是用来获取state的数据的，不过它可以按要求返回数据，及调用相关函数了过滤掉不需要的返回信息。大致用法和state一样，也是注入到computed中。

访问getter

• 属性访问

Getter会暴露为store.getters对象，我们可以通过属性的形式直接访问这些值。

getters:{
    // 两个参数非别代表的信息如命名所示
    getInfo(state,getters){
        return state.info;
    }
}

this.$store.getters.getInfo // 适用于以从根组件注入到子组件中
store.getters.getInfo

注意：通过属性访问时是作为 Vue 的响应式系统的一部分缓存其中的。

• 方法访问

可以让getter返回一个函数，来实现给getter传参

getters:{
    getInfo: (state) => id => {
        return state.allInfo.id;
    }
}
// 调用
store.getters.getInfo(2)

注意：getter在通过方法访问时，每次都会进行调用，而不会缓存结果

mapGetters

将store中的getter映射到局部计算属性中

computed:{
    ...mapGetters("moduleName",[
        newInfoName: 'infoA'
    ])
}

Mutation

作用：修改state中的数据

接收的参数：

• state：含义如命名所示
• payload：可以在调用Mutation函数的时候，自己传入相关信息

// 定义
mutations:{
    add(state,n){
        state.count += n;
    }
}
// 调用
this.$store.commit('add',1);

因为只可以传入一个参数，所以一般为了传入更多的内容，会将参数定义为一个对象。而且只能通过commit调用相关函数。

也可以使用对象方式提交

//定义
mutations:{
    add(state,payload){
        state.count += payload.count;
    }
}
// 调用
this.$store.commit({
    type: 'add',
    count: 1
})

需要注意点

• 需要提前初始化好所需要的属性

• 如果需要向state中添加新属性

  • Vue.set(state.obj,‘keyName’,keyVal)
  • state.obj = {…state.obj,keyName:keyVal}

• 使用常量代替Mutation事件类型

  • import { SOME_MUTAION } from './mutation-type'
    mutations:{
        [SOME_MUTAION](state){
            // ....
        }
    }
    

  • 可以方便我们进行管理，而且可以防止一些恶意的篡改

• Mutation必须时同步函数

  • 因为函数本来就没有监听异步操作，如果使用异步会造成数据紊乱
  • 程序也会变得很难调试

mapMutaions

方便使用Mutation，可以映射到methods中，方便调用

methods:{
    ...mapMutaions("moduleA",[
        'methodA',
        'methodB'
    ])
}

Action

作用：修改state中的数据，支持异步

其实，如果需要更改数据，Action是提交Mutation进行修改的

actions:{
    // 通过解构赋值简化代码参数，不过这个参数不是store里面的，为了保证异步准确，相当于是一份赋值
    addAsync({commit,context,dispatch}){
        setTimeout(()=>{
            commit('add',1);
        },1000);
    }
}

这样就能实现在触发1s后，提交给mutation去修改数据，而mutation只能是同步的。

在组件中触发

this.$store.dispatch('addAsync',1);
// 可传入多个值
this.$store.dispatch('addAsync',{
    count: 1
});
// 以对象的方式分发
this.$store.dispatch({
    type:'addAsync',
    amount: 1
})

mapActions

methods:{
    ...mapActions('moduelName',[
        'addAsync'
    ])
}

Module

如果我们将所有数据放到state中，那么管理会很麻烦，而且命名也是，所以我们可以使用Module将store分割成模块。每个模块都有自己的state\getter\mutation\action

const modulesA = {
    namespaced: true,
    state:{},
    getters:{},
    ....
}
const store = new Vuex.Store({
    modules:{
        modulesA
    }
})