vuex知识点总结

1. 什么是vuex

• Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式，它采用集中式存储管理应用的所有组件的状态。

• Vuex 是单向数据流的一种实现。
  以下是一个表示“单向数据流”理念的简单示意
  

• vuex它由五部分组成

1. state: 用来存状态
2. actions:可以包含异步操作
3. mutations: 唯一可以修改state数据的场所
4. getters: 类似于vue组件中的计算属性，对state数据进行计算（会被缓存）
5. modules:模块化管理store（仓库），每个模块拥有自己的 state、mutation、action、getter

• 使用方法
  只需要创建项目的时候勾选上vuex就自动配置好了 直接使用即可

import Vue from "vue"
import Vuex from "vuex"
//引入cart的vuex模块
import cart from "@/store/modules/cart.js"
Vue.use(Vuex)
export default new Vuex.Store({
	//当做data
	state:{
	},
	//相当于计算属性
	getters:{
	},
	//同步一些方法
	mutations:{
	},
	//存放异步的方法
	actions:{
	}
})

这里面的state就相当于data，getters相当于computed，mutations存放同步的方法，actions存放异步的方法。

• Vuex 的完整流程
  组件中触发 Action，Action 提交 Mutations，Mutations 修改 State。 组件根据 State 或 Getters 来渲染页面。
  

高级用法----- 数据持久化插件

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

最简单的做法就是利用插件 vuex-persistedstate。
安装
cnpm安装
cnpm install vuex-persistedstate -s
yarn安装
yarn add vuex-persistedstate -s
备注：

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

import createPersistedState from 'vuex-persistedstate'

const store = new Vuex.Store({
  state,
  mutations,
  actions,
  getters,
  plugins: [createPersistedState({
    storage: sessionStorage,//storage:存储方式：（sessionStorage,localStarage）
    key: "token"//key:定义本地存储中的key
  })]//会自动保存创建的状态。刷新还在
})

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

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>