Vuex学习笔记

1. 概念

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

2. 工作流程

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

3. 安装

npm i vuex					//安装

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
    }
}
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   # 产品模块