vuex和vuex的数据持久化

vuex是什么？

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。Vuex背后的基本思想，就是前面所说的单向数据流。下图就是Vuex实现单向数据流的示意图。

vuex的五大核心：

state 存储数据   在组件中的使用  this.$store.state.属性名
mutations 直接操作state中的数据  在组件中的使用 this.$store.commit("方法名",参数)
actions 可以实现异步操作  在actions中操作mutations中的数据  在组件使用 this.$store.dispatch("方法名"，参数)
getters getters类似于计算属性可以对state中数据进行逻辑计算 在组件中 this.$store.getters.方法名
modules 将state分模块

Mutations:

Vuex给我们提供修改仓库 store中的状态的唯一办法就是通过提交mutation
他会接受两个参数，第一个参数是state,第二个参数是要传入的数据,在组建中通过this.$store.commit(方法名，参数)来调用,参数可以是单个或者多个。

actions:

用来解决异步流程来改变state数据。
而matution是直接进行同步操作的，如果你在mutations里进行异步操作，你会发现没用，并不会起任何效果,只有通过action=>mutations=>states，在组建中通过this.$store.dispatch("方法名",参数）,来调用

Getters:

getters 是store的计算属性，类似于computed,对state里的数据进行一些过滤，改造等等,比如购物车的计算总价格、购物车的取小数点后两位，在组建中通过this.$store.getters.方法名,来调用

vuex的运行机制

在组件中通过dispatch来调用actions中的方法在actions中通过commit来调用mutations中的方法，在mutations中可以直接操作state中的数据，state的数据只要一发生改变立马响应到组件中

如何使用

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>

---

高级用法之—数据持久化

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

npm install vuex-persistedstate -S

备注：

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

2、在store.js里引入

import createPersistedState from 'vuex-persistedstate'
const state = {
    user:{},
}
export default new Vuex.Store({
    state,
    getters,
    actions,
    mutations,
    plugins: [createPersistedState(
    	storage: window.sessionStorage,
    	key: "token"
    )]//会自动保存创建的状态。刷新还在
});

参数：

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

这样就会把数据存在本地的localStorage里，就会持久化。

高级语法之—模块化管理数据（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: {
  	set_cartid(state, val) {
      state.userid = val;
    }
  },
  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",12356)

高级语法之—辅助函数（语法糖）

1、有那几个辅助函数
mapState、mapMutations、mapActions、mapGetters
2、辅助函数可以把vuex中的数据和方法映射到vue组件中。达到简化操作的目的
3、使用

<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']),
   ...mapStateUser(['userid']),
   ...mapStateCart({cartid:'userid'})
 },
 //生命周期 - 创建完成（访问当前this实例）
 created() {
   this.setToken('123456')
 },
 //生命周期 - 挂载完成（访问DOM元素）
 mounted() {},
 methods: {
   ...mapActions({
     setToken: 'setToken'
   }),
   ...mapMutations(['SET_TOKEN']),
   ...mapMutaionUser({
   setId:"setToken"
  })
 }
}
</script>