Y18给你讲解vuex

1.Vuex是什么

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式，通过vuex我们可以解决组件之间数据共享问题，后期也方便我们管理以及维护。

vuex的基本思想就是 单向数据流 ,下图就是Vuex实现单向数据流的示意图：

2.Vuex的五个属性

• state: 存放状态，例如你要存放的数据
• action: 用来解决异步流程来改变state数据
• getters:可以认为，getters 是store的计算属性，类似于computed,对state里的数据进行一些过滤，改造等等
• Mutations:Vuex给我们提供修改仓库 store中的状态的唯一办法就是通过提交mutation
• module: 可以让每一个模块拥有自己的state、mutation、action、getters,使得结构非常清晰，方便管理

3.Vuex使用

通过在根目录下新建一个store文件夹，里面创建一个index.js文件，最后在main.js中引入，并挂载到实例上，之后那个组件中需要用到vuex就调用就行

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

Vue.use(Vuex)

export default new Vuex.Store({
	// 存放数据源  		  this.$store.state.xxx
	state: {},		
	// 唯一修改state的地方 this.$store.commit('事件名',参数)
	mutations: {},
	// 执行异步操作 		  this.$store.dispatch('事件名')
	actions: {},
	// 模块,每个模块拥有自己的state,mutations,actions,getters
	modules: {},
	// 计算state
	getters:{}   	 // this.$store.getters.xxx
})

4.Vuex数据持久化

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

安装插件使数据持久化：vuex-persistedstate

解决办法： 存放在localStorage或者sessionStorage里面，进入页面时判断是否丢失，丢失再去localStorage或者sessionStorage里面取；
在vuex中可以通过安装vuex-persistedstate插件，进行持久化的配置就行

下载完成后在store/index.js
import persist from 'vuex-persistedstate'
plugins: [persist({
	// 定义数据存储的方式 值可以是localStorage 也可以是sessionStorage
    storage: localStorage,
    // 定义需要指定存储的数据 因为正常工作中vuex不是每一条数据都需要存储 所以我们需要指定需要存储的数据
    reducer(state) { 
    return {
       goods: state.goods
   }
 }
})]

注意
我们在使用vuex里面的数据时，可以直接写在模板template

<div>{{$store.state.xxx}}</div>

也可以定义在data里面，但是它监听不到数据的变化

data() {
	return {
	    xxx:this.$store.state.xxx
	}
}
vuex中的数据最好不要用data来接受，因为数据是后来者居上，没有实现数据双向绑定，不会触发生命周期中beforeupdate,updated钩子函数。

我们推荐在computed里面接收vuex数据

computed:{
	xxx() {
		return this.$store.state.xxx
	}
}

5.模块化管理数据

在项目庞大，数据信息量特别大的时候，我们可以考虑分模块形式管理数据，比如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("user/SET_USERID",12345)// 前面是指定模块user 中的SET_USERID 方法，后面是传参 可以是对象、数组、字符串等

6.辅助函数

1. 4种辅助函数
   mapState,mapActions,mapMutations,mapGetters
2. 辅助函数可以把vuex中的数据和方法映射到vue组件中。达到简化操作的目的
3. home中使用

<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>