vuex总结

1、vuex是什么？

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
vuex是使用vue中必不可少的一部分，基于父子、兄弟组件，我们传值可能会很方便，但是如果是没有关联的组件之间要使用同一组数据，就显得很无能为力，那么vuex就很好的解决了我们这种问题，它相当于一个公共仓库，保存着所有组件都能共用的数据。
它的五大核心是：state，mutations，actions，getters，modules

2、Vuex的五大核心及代表的意义？

1. state：数据，存储状态（对象）。（存放Vuex store实例的状态对象，用于定义共享的数据）
2. mutations：修改状态，同步，它只用于修改state中定义的状态变量（在组件中使用是this.$store.commit(" ")）
3. actions：异步操作（在组件中使用是this.$store.dispath(’’ ")）
4. getters：类似vue组件中的计算属性，对state数据进行计算（会被缓存）
5. modules：模块化管理store（仓库），每个模块拥有自己的 state、mutation、action、getter

使用场景：

当有多个组件共享数据时，如果需要构建是一个中大型单页应用，会考虑如何更好地在组件外部管理状态，就使用Vuex 。

3、详述Vuex运行机制

• Vuex的状态存储是响应式的
• 当vue组件从store中读取时，若store中状态发生改变，响应的组件也会更新状态
• 不能直接改变state，必须通过显示的提交(commit)mutations来追踪每个状态的变化

4、Vuex中如何异步修改数据

• 同步更改mutations
• 异部更改action，action中通过commit触发mutations进行state数据更改
• .页面中触发action中函数

5、如何使用？

store===>index.js

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(){
    	//调用acionts中的方法
    	this.$store.dispatch('set_token',12345);
    	//调用mutations中的方法
    	this.$store.commit('to_token',123456)
  	}
}
<script>

6、高级用法-之 数据持久化

问题：vuex里面存放的数据，页面一经刷新会丢失。
为了解决刷新页面数据丢失，才有了数据持久化。

解决办法： 存放在localStorage或者sessionStorage里面，进入页面时判断是否丢失，丢失再去localStorage或者sessionStorage里面取；

在app.vue根组件的created里面判断是否丢失，在进行上面的操作；

最简单的做法就是利用插件：vuex-persistedstate

安装

cnpm install vuex-persistedstate -S

使用：

之后在store.js里面导入

import createPersistedState from 'vuex-persistedstate'

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

这样的话就可以做到数据持久化啦

参数

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

7、高级用法-之 辅助函数（语法糖）

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>

8、高级语法-值 模块化管理数据 （modules）

什么时候需要用到模块管理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)