Vuex ----超简单详细使用手册

之前在项目用到过Vuex,但用的时候都是前辈写好的结构，知其然而不知所以然，看了几篇博客以及官网的内容打算小小的整理一下，首先来抛玉引砖，推荐几个我觉得通俗易懂的博客：

未将状态使用Modules进行表达的：https://blog.csdn.net/u011068996/article/details/80216154
使用Modules进行表达的：https://segmentfault.com/a/1190000009404727
当然官网也很重要，虽然没有中文的但是可以翻译成中文页面（中英对照着看不然理解会有偏差）：https://vuex.vuejs.org/

（以下实际例子以vue-cli为背景进行）

Vuex（作用就是全局变量状态管理）

（1）什么都不说这个是真的重要：

（2）与全局变量的区别

vuex的state状态可以理解为响应式的双向改变；其次，其状态必须通过提交mutations进行改变

Vuex基本知识点指南（基本官网前几节）

（本来相把原xmind文件附上，但是下载需要积分币，没必要下载，给大家省点吧）

注意：.getters的第三个参数rootState,可进行跨模块调用state;

.state 是会根据组合时模块的别名来添加层级的【归于根state】,后面的 getters,mutations ,actions 都是合并在 store 下

.getters不可重名，重名报错；mutations与actions可重名，且重名访问时按照模块引入顺序依次触发

Vuex非模块使用实战

安装：npm install vuex --save
main.js中引入

....
import store from './store'
....

new Vue({
  el: '#app',
  router,
  store,     //此处声明
  components: { App },
  template: '<App/>'
})

src下建立store文件夹并建立index.js,内容如下：

import Vue from 'vue'
import Vuex from 'vuex'

//注册vuex到vue中
Vue.use(Vuex)

//你的内容
const state={
    isLogin:false,
    a:2,
    b:3
}

const getters = {
  getlogin:(state)=>{
    return state.a+state.b
  }
}

const actions = {
  almuta({ commit, state },loginState){
    commit('alterLogin',loginState)
  }
}

const mutations = {
    alterLogin(state,loginState){
        state.isLogin=loginState
    }
}

//vuex实例输出
export default new Vuex.Store({
    state,
    getters,
    actions,
    mutations
})

组件中的访问（非map方式）

html部分：

<button class="confirmbtn" v-if="isLogin" @click="billlogin">登录</button>
<button @click="almuta(true)">actiontest</button>
<button @click="alstate(false)">mutationtest</button>
<button class="maybtn"><router-link to="/register">注册{{getlogin}}</router-link></button>

scritp部分:
 computed:{
    isLogin:function(){ return  this.$store.state.isLogin },
    getlogin:function(){ return this.$store.getters.getlogin}
  }
 
  methods:{
    almuta(opt){
      this.$store.dispatch('almuta',opt)
    },
    alstate(opt){
      this.$store.commit('alterLogin',opt)
   }
  }

Vuex模块使用实战

1.安装【同上】

2.main.js中引入【同上】

3.src下store目录结构

各个文件内容：

// index.js 

import Vue from 'vue'
import Vuex from 'vuex'
import common from './modules/common'

Vue.use(Vuex)

export default new Vuex.Store({
    modules:{
        common
    }
})



//common.js

const state={
    isLogin:false,
    a:2,
    b:3
}

const getters = {
  getlogin:(state)=>{                     //此处有第三个参数根state,只写了一模块就不赘述了
    return state.a+state.b
  }
}

const actions = {
  almuta({ commit, state },loginState){
    commit('alterLogin',loginState)
  }
}

const mutations = {
    alterLogin(state,loginState){
        state.isLogin=loginState
    }
}

export default{
    namespaced: true,
    state,
    getters,
    actions,
    mutations
}

4.组件访问（map方式演示）：

//html部分
<div class="formbtn">
        <button class="confirmbtn" v-if="isLogin" @click="billlogin">登录</button>
        <button @click="almuta(true)">okok</button>
        <button class="maybtn"><router-link to="/register">注册</router-link></button>
</div>

//script部分
  import {login} from '../assets/js/api'
  import { mapMutations, mapState , mapActions,mapGetters } from 'vuex'
    export default {
     computed:{
         ...mapState({
            isLogin: state => state.common.isLogin
         }),
       ...mapGetters('common',{
         getlogin:'getlogin'
       })
     },
      mounted(){
        console.log(this.getlogin)
      },
     methods:{
         ...mapMutations('common',{
          alterLogin:'alterLogin'
        }),
       ...mapActions('common',{
         almuta:'almuta'
       })
     }
    }

map方式知识点：。mapState , mapGetters使用在computed，形成组件的data数据供后续使用

。mapMutations , mapActions 在methods，形成方法供后续使用

。mapMutations , mapActions , mapGetters三者首个参数是所属模块，后边是所需要调用的对应处理

。mapState中状态量获取时为：state.所属模块.状态名