Vuex(概念、几部分组成、map高级语法、数据持久化)

Vuex(概念、几部分组成、map高级语法、数据持久化、模块化管理数据(modules))

---

①概念：Vuex是一个专门为vue.js应用程序开发的状态管理模式；是用来存放公共数据的；

②几部分组成：有五部分组成，分别是:  (1)state: 数据:(2)actions:异步操作;(3)mutations:唯一 一 个可以修改state数据的;(4)getters: 类似于vue组件中的计算属性,对state数据进行计算(会被缓存);(5)modules:模块化管理store(仓库),每个模块拥有自己的 state、mutation、action、getter;

③map高级语法：

就是辅助函数mapState、mapActions、mapMutations、mapGetters；

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

辅助函数的使用：

在需要使用的组件中 引入Import { mapActions, mapGetters, mapMutations, mapState } from 'vuex'；

 通过展开运算符的方式使用,可以在computed计算属性和methods方法中使用；

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

④数据持久化:

存储在Vuex中的状态，刷新页面以后，会丢失，所以才有数据持久化的使用。

最简单的做法是利用插件 vuex-persistedState; 先安装cnpm install 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,
    key: "token"
  })]//会自动保存创建的状态。刷新还在
})

参数：

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

⑤模块化管理数据(modules):Vue 基本思想之一是数据驱动,Vuex 同时也是专门的数据状态关联库;使用Vuex module 命名空间概念,可以解决项目在开发过程中,随着项目逐渐增大,数据关联复杂度逐渐加大,多人协同开发,这时会遇到Vuex数据更新时,执行某个action 导致同名/未预测到的关联数据发生的变化的问题。

---

补充：

Vuex运行机制：

1. Vuex的状态存储是响应式的；

   1. 当Vue组件从store中读取时，若store中状态发生改变，响应的组件也会更新状态；

   2. 不能直接改变state，必须通过显示的提交(commit)mutations来追踪每个状态的变化;

   3. (1)同步更改mutations；(2)异部更改action,action中通过commit触发mutations进行state数据更改;(3)页面中触发action中函数；

 

Vuex中如何异步修改数据：

            ​(1)同步更改mutations；

            (2)异部更改action,action中通过commit触发mutations进行state数据更改;

            (3)页面中触发action中函数；

action,action中通过commit触发mutations进行state数据更改    

（3）.页面中触发action中函数