Vuex 解决各组件之间 通信复杂 之二

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式， 采用集中式存储管理应用的所有组件的状态，解决多组件数据通信。(类似一个仓库,需要值时从仓库中取)

结论

1. 修改state状态必须通过mutations(为项目中减少必要的数据修改错误)

2. mutations只能执行同步代码，类似ajax，定时器之类的代码不能在mutations中执行

3. 执行异步代码，要通过actions，然后将数据提交给mutations才可以完成

4. state的状态即共享数据可以在组件中引用

5. 组件中可以调用action

一. 创建 

 1.1 下载vuex

npm i vuex  (yarn add vuex)

 1.2 创建 src/store/index.js

import vuex from 'vuex'
import Vue from 'vue'
Vue.ues(vuex)
const store = new Vuex.Store({
    state:{},
    mutations:{},
    getters:{},
    actions:{},
    modules:{}
})
export default store

1.3 在main.js中挂载

import store from '@/store'
new Vue({
  el: '#app',
  store
})

二. 各属性具体使用

  2.1 state使用  同data

state是放置所有公共状态的属性，如果你有一个公共状态数据 ， 你只需要定义在 state对象中

{
state:{
   属性名:'', 
}
}

//使用:
插值表达式:
组件template中:{{ $store.state.属性名 }}
组件script中: this.$store.state.属性名

//模块中state:
{{ $store.state.模块名.属性名 }}
this.$store.state.模块名.属性名

//辅助函数中:
//按需导入import { mapState } from 'vuex'
//computed中映射:映射后的state中的数据等同与vue文件中data的使用方式
 computed: {
    ...mapState(['属性名'])
    ...mapState(['state的属性（xxx）'],{新的名字:'state的属性名'})
    ...mapState('模块名',['属性名'])
  }
//使用: this.属性名  /  {{xxx,新的名字}}

2.2 getters 使用 

同计算属性 依赖一个或多个属性计算得来

getters:{
    方法名(state,getters,rootState,rootGetters){
        return 新的值或方法(){}
    }
}

//使用：
this.$store.getters.方法名
//模块中:this.$store.getters['模块名/方法名]

//辅助函数: 
//导入:
import { mapGetters } from 'vuex
//使用:
 computed:{
     ...mapGetters(['方法名'])
     ...mapGetters('模块名',['方法名'])
 }
 //使用：this.方法名

2.3 mutations   

tate数据的修改只能通过mutations，并且mutations必须是同步更新，目的是形成数据快照 mutations是一个对象，对象中存放修改state的方法

{
    mutations：{
        方法名（state,value形参）{
            state.state中属性名=value
        }，
    }
}

//组件中使用:
this.$store.commit('mutations方法名',实参)
this.$store.commit('模块名/方法名',实参)

//辅助函数:
import  { mapMutations } from 'vuex'
//在methods中 映射
methods: {
    ...mapMutations(['mutations名'])
    ...mapMutations('模块名',['mutations名'])
}
//使用
this.方法名（实参值）

2.4 antions  

state是存放数据的，mutations是同步更新数据，actions则负责进行异步操作

actions:{
    方法名（store,value）{
     store:{
            state:当前模块的state,
            getters:当前模块的getters
            rootState:根模块的state
            rootGetters:根模块下的getters
            commit:调用mutations的方法
                   调用当前模块的mutations :store.commit('mutations方法名',实参值)
            dispatch:调用actions的方法
                   调用当前模块的actions：store.dispatch('actions方法名',实参值)
     }   
    }
}

//组件中使用:
this.$store.dispatch('方法名',实参)
//模块中:
this.$store.dispatch('模块名/方法名',实参)


//辅助函数:
import { mapActions } from 'vuex'
methods:{
    ...mapActions(['方法名'])
    ...mapActions('模块名',['方法'])
}
使用:
this.方法(实参)

三.模块的使用

    3.1.大致方法已经如上所述,但是具体如何使用和挂载如何实现呢?

         3.1.1 创建src/store/modules/xxx.js文件

         3.1.2 文件具体内容如下:

const state = {}
const mutations = {}
const getters = {}
const actions = {}

export default {
  namespaced: true, //开启命名空间
  state,
  mutations,
  getters,
  actions
}

        3.1.3 在store/index.js中

import Vue from 'vue'
import Vuex from 'vuex'
import xxx from './modules/xxx.js'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {},
  mutations: {},
  actions: {},
  modules: {
    xxx
  }
})

        3.1.4.使用时的模块名  为xxx

 特别:3.2 vuex中modules下的actions与getters完整使用

在store/modules/user.js中:

actions:{
        actions方法名(store,形参){
            store:{
                state:当前模块的state数据
                
                rootState:根模块下的state数据  
                          rootState.模块名.属性名
                
                commit:调用mutations方法
// 调用本模块的mutations方法： commit('本模块的mutations方法名'，实参值)
// 调用其它模块的mutations方法：commit('模块名/方法名',实参值（没有,用null占位）,{root:true})
                
                dispatch:调用actions方法
// 调用本模块actions方法：dispatch('本模块的actions方法',实参)
// 调用其它模块的actions方法:dispatch('模块名/方法名'，实参（没有,用null占位）,{root:true})
                
                getters:调用getters方法
                        getters.本模块的getters方法名
                
                rootGetters:调用根模块下的getters方法
//  调用其它模块的getters:rootGetters['模块名/其它模块getters方法']
            }
        }

getters:{
        方法名(state,getters,rootState,rootGetters){
                state:当前模块的state数据,
                rootState:根模块下的state数据  
                      rootState.模块名.属性名
                getters:调用getters方法
                       getters.本模块的getters方法名
                rootGetters:调用根模块下的getters方法
                      调用其它模块的getters:rootGetters['模块名/其它模块getters方法']  
        }
    }