Vuex的理解

什么是Vuex？

vuex是一个专门为vue.js应用程序开发的状态管理模式。
它由五部分组成：state、actions、mutations、getters、modules
这五部份分别代表：
1.state：存储数据的地方
2.actions：可以进行异步操作
3.mutations：唯一可以修改state中数据的场所
4.getters：类似于vue中的计算属性，可以对state中的数据做一些逻辑性的操作
5.modules：模块化管理store（仓库），每个模块拥有自己的 state、mutation、action、getter

思维导图

如何使用

store.js文件中

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

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
	token:''
  },
  mutations: {
	 to_token(state,val){
   		state.token=val;
	 }
  },
  actions: {
	set_token({commit},val){
    	commit("to_token",val)
 	}
  },
  getters:{
    
  }
})

在组件中

<template>
  <div>
    {{$store.state.token}}
  </div>
</template>
<script>

export default={
 name: 'Home',
  data() {
    return {
      tel: '',
          }
  },
  created(){
    //调用acionts中的方法
    this.$store.dispatch('set_token',12345);
    //调用mutations中的方法
    this.$store.commit('to_token',123456)
  }


}

<script>

给vuex配置持久化，将数据存储到本地存储中

为了解决刷新页面数据丢失
最简单的做法就是利用插件 vuex-persistedState。

1. 安装
   cnpm install vuex-persistedState -S
2. 使用

import Vue from 'vue'
import Vuex from 'vuex'
//1.导入插件
import VuexPersistence from 'vuex-persist'

Vue.use(Vuex)

//2. 创建对象进行配置
const vuexLocal = new VuexPersistence({
  storage: window.localStorage,//配置存储介质，默认持久化到本地存储中
})

export default new Vuex.Store({
  state: {

  },
  mutations: {
  
  },
  actions: {

  },
  plugins: [vuexLocal.plugin],//引入插件
})

模块化管理数据

当项目庞大，数据信息量特别大的时候，我们可以考虑分模块形式管理数据，比如user模块管理用户信息数据，cart模块管理购物车数据，shop模块管理商品信息数据。

import vue from 'vue'
import Vuex from 'vuex'
Vue.use(vuex);

const state= ()=>{ token:''}
const actions = {
   set_token({commit},val){
     commit("to_token",val)
  }
}
const mutations = {
   to_token(state,val){
    state.token=val;
  }
}
const getters = {}


//user模块
let user = {
  namespaced: true, //一定要开始命名空间。
  state: { userid: 1234 },
  actions: {
  },
  mutations: {
    SET_USERID(state, val) {
      state.userid = val;
    }
  },
  getters: {

  }
}

//购物车数据的模块
let cart = {
  namespaced: true,
  state: { userid: 567 },
  actions: {

  },
  mutations: {
  },
  getters: {

  }
}


const store = new Vuex.Store({
  state,
  mutations,
  actions,
  getters,
  modules: {
    user,
    cart
  },
  plugins: [createPersistedState({
    storage: sessionStorage,
    key: "token"
  })]//会自动保存创建的状态。刷新还在
})

export default store
 

在组件中使用

获取user模块的`userid`
this.$store.state.user.userid
this.$store.commit("SET_USERID",12345)

辅助函数（语法糖）

四大辅助函数：

mapState,mapActions,mapMutations,mapGetters

辅助函数可以把vuex中的数据和方法映射到vue组件中。达到简化操作的目的

在组件中使用

<template>
 <div id="">
   {{ token }}
   {{ token - x }}
 </div>
</template>

<script>
import { mapActions, mapGetters, mapMutations, mapState } from 'vuex'

import {createNamespacedHelpers} from 'vuex'

const {mapState:mapStateUser,mapActions:mapActionUser,mapMutations:mapMutaionuser} = createNamespacedHelpers('user')

const {mapState:mapStateCart,mapActions:mapActionCart,mapMutations:mapMutaionCart} = createNamespacedHelpers('cart')



export default {
 name: '',
 data() {
   return {}
 },
 computed: {
   ...mapState({
     token: 'token'
   }),
   ...mapGetters(['token-x']),
   ...mapSateUser(['userid']),
   ...mapStateCart({cartid:'userid'})
 },
 //生命周期 - 创建完成（访问当前this实例）
 created() {
   this.setToken('123456')
 },
 //生命周期 - 挂载完成（访问DOM元素）
 mounted() {},
 methods: {
   ...mapActions({
     setToken: 'setToken'
   }),
   ...mapMutations(['SET_TOKEN']),
   ...mapMutaionUser({
   setId:"setToken"
  })
 }
}
</script>