Vuex学习笔记

 

1. 概念

 

​Vuex 是一个专为vue.js应用程序开发的状态管理模式。在庞大的项目中，能够方便地集中式管理和维护组件之间频繁传递的data中的值，也是组件之间通信的方式，适用于任意组件间通信。

 

2. 工作流程

 

备注：若没有网络请求或其他业务逻辑，组件中也可以越过actions，即不写dispatch，直接commit

 

3. 安装

 

npm i vuex //安装

 

1

 

4. 搭建Vuex环境

 

在main.js文件中创建Vue时传入store配置项

 

import Vue from 'vue'

 

import App from './App.vue'

 

import store from './store'

 

new Vue({

 

    el:'app',

 

    render: h => h(App),

 

    store,

 

})

 

创建store/index.js文件

 

import Vue from 'vue'

 

import Vuex from 'vuex' //引入

 

Vue.use(Vuex) //使用插件

 

//创建Vuex中最核心的store

 

const action = {} //用于响应组件中的动作

 

const mutations = {} //用于操作数据

 

const state = {} //用于存储数据

 

const getters = {} //可以认为是store的计算属性,对state中的数据加工

 

//创建并暴露store

 

export default new Vuex.Store({

 

    action,

 

    mutations,

 

    state,

 

    getters,

 

})

 

5. 基本使用

 

import Vue from 'vue'

 

import Vuex from 'vuex' //引入

 

Vue.use(Vuex) //使用插件

 

//创建Vuex中最核心的store

 

const action = {

 

    showName(context,value){

 

        context.commit('SHOWNAME',value) //context上下文中包含store

 

    }

 

}

 

/*

 

context:{

 

state,   等同于store.$state，若在模块中则为局部状态

 

rootState,   等同于store.$state,只存在模块中

 

commit,   等同于store.$commit

 

dispatch,   等同于store.$dispatch

 

getters   等同于store.$getters

 

}

 

常规写法调用的时候会使用context.commit，但更多的是使用es6的变量解构赋值，也就是直接在参数的

 

位置写自己想要的属性，如：{commit}。

 

*/

 

const mutations = {

 

    SHOWNAME(state,value){

 

        state.name = value //改变store中的name为hello

 

    }

 

}

 

const state = {

 

    name: 'hello Vuex',

 

    age: 25,

 

}

 

const getters = {

 

    upName(state){

 

        return state.name = 'HELLO VUEX'

 

    }

 

}

 

//创建并暴露store

 

export default new Vuex.Store({

 

    action,

 

    mutations,

 

    state,

 

    getters,

 

})

 

在组件中使用Vuex

 

在视图(template)中，用 $store.state.name / this.$store.getters.upName ;

 

在脚本(script)中，用 this.$store.state.name / this.$store.getters.upName ;

 

用 this.$store.dispatch('showName','hello')调用action；

 

也可以直接用 this.$store.commit('SHOWNAME'，'hello')调用mutation。

 

6. 借助map使用

 

6.1 mapState和mapGetters

 

import {mapState，mapGetters} from 'vuex'

 

export default {

 

    data(){return {}},

 

    computed:{

 

        //借助mapState生成计算属性，从state中读取数据

 

        ...mapState({mingzi:'name',nianling:'age'}) //对象写法

 

        /* 

 

          mingzi(){return this.$store.state.name}

 

        nianling(){return this.$store.state.name}

 

        */

 

        ...mapState(['name','age']) //数组写法

 

        /* 

 

          name(){return this.$store.state.name}

 

          age(){return this.$store.state.name}

 

        */

 

        //借助mapGetters生成计算属性，从getters中读取数据

 

        ...mapGetters({upName:'upName'}) //对象写法

 

        ...mapGetters(['upName']) //数组写法

 

      /*

 

          upName(){return this.$store.getters.upName}

 

        */

 

    }

 

}

 

6.2 mapActions和mapMutations

 

import {mapActions，mapMutations} from 'vuex'

 

export default {

 

    data(){return {}},

 

    methods:{

 

        //借助mapActions生成actions方法，即包含this.$store.dispatch(xxx)的函数

 

        ...mapActions({showName:'showName'}) //对象写法

 

        ...mapActions(['showName']) //数组写法

 

        //借助mapMutations生成mutations方法，即包含this.$store.commit(xxx)的函数

 

        ...mapMutations({showName:'SHOWNAME'}) //对象写法

 

        ...mapMutations(['SHOWNAME']) //数组写法

 

    }

 

}

 

备注：mapActions和mapMutations使用时，若需要传递参数，在模板中绑定事件时传递好参数，否则参数是事件对象。

 

7. 模块化

 

一些规则：

 

应用层级的状态应该集中到单个 store 对象中。

 

提交 mutation 是更改状态的唯一方法，并且这个过程是同步的。

 

异步逻辑都应该封装到 action 里面。

 

├── index.html

 

├── main.js

 

├── api

 

│   └── ... # 抽取出API请求

 

├── components

 

│   ├── App.vue

 

│   └── ...

 

└── store

 

    ├── index.js          # 我们组装模块并导出 store 的地方

 

    ├── actions.js        # 根级别的 action

 

    ├── mutations.js      # 根级别的 mutation

 

    └── modules

 

        ├── cart.js       # 购物车模块

 

        └── products.js   # 产品模块