Vuex 是什么？

前言:
Vuex 是一个专门为 Vue.js应用程序开发的状态管理模式。它采用的是集中存储管理应用的所有组件的状态，vuex也是vue的官方调试工具。在数据量打的时候使用vuex

它是由五种状态分别是：

state:存储状态
getters:可以理解为state的计算属性。对数据获取之前的再次编译，我们在组件中使用 通过$sotre.getters.fun(方法)
mutations:修改状态this.$store.commit({方法}) 再到vuex中 mutations里写自定义方法名，
它是同步的，一般在组件中使用 用来存放方法的，它是只要调用这个方法就会调用mutations
actions:异步操作 在组件中使用是$store.dispath(")用来执行异步操作的
	这个和同步的mutations相似
modules：store的子模块 为了开发大型项目，方便状态管理而使用的。
plugins 是一个插件

1.如何使用

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={}
let store=new Vuex.store({
	state,
	actions,
	mutations,
	getters
})
module.export=store;

home.vue

<template>
	<div>
		{{$store.state.token}}
	</div>
</template>
<script>
export default={
	name:"Home",
	data(){
		return{
			tel:' ',
		}
	},
	created(){
		//调用actions中的方法
		this.$store.dispatch('set_token',12345);
		//调用mutations中的方法
		this.$store.commit('to_token',123456)
	}
}
</script>

2.高级用法-之 数据持久化

问题:在存储vuex中的状态，刷新页面会丢失数据
所以：为了解决存储在vuex中的状态刷新页面后数据不会丢失，从而才有了数据持久化。

最简单的做法就是利用插件vuex-persistedState。
1.安装
cnpm install vuex-persistedState -S
备注：

-S 是--save的简写，意为：把插件安装到dependencies（生产环境依赖）中
-D 是--save-dev的简写，意为：把插件安装到devDependencies（开发环境依赖）中

2.使用

import createPersistedState from "vuex-persistedstate"

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

参数

storage:存储方式。（sessionStorage,localStarage）key:定义本地存储中的key

3.高级用法-之值 模块化管理数据（modules）

1.什么时候需要用到模块管理vuex数据。

项目庞大 数据信息量特别大的时候，我们可以考虑分模块形式管理数据，比如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

home.vue如何使用

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

4.高级用法-之 辅助函数（语法糖）

1.有那几个辅助函数（4大金刚）
mapState,mapActions,mapMutations,mapGetters
2.辅助函数可以把vuex中的数据和方法映射到vue组件中。达到简化操作的目的
3.如何使用
home.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>