vuex 小结

vue
vuex
什么是vuex

Vuex:是vue的状态管理工具，就是管理公共数据的，这个数据在任何组件都能使用

vuex的持久化数据

安装插件

npm i vuex-persistedstate --save
 在store/index.js 中引入

import  vuexPersist  from  "vuex-persist"
配置

plugins: [ new vuexPersist({  storage: window.localStorage,   }).plugin,  ],
vuex的五大核心

state	状态 存放数据，相当于data
mutations	修改state的地方，而且只有它有权利修改state
getters	相当于计算属性
actions	在vuex中执行异步操作的地方
modules	模块 当state比较多的时候进行分模块管理

state的使用 this.$store.state.xxx

建议使用计算属性，这样在数据改变时会自动更新

mutations的使用     this.$store.commit ( ‘事件名’ , 传的参数)
 

1.vuex ：是一个专为vue.js开发的状态管理器，采用集中式存储的所有组件状态，通过vuex我们可以解决组件之间数据共享的问题，后期也方便我们管理以及维护

有五个属性分别是： state、getters、mutations、actions、module

state属性： 存放状态，例如你要存放的数据

getters： 类似于共享属性，可以通过this.$store.getters来获取存放在state里面的数据

mutations： 唯一能改变state的状态就是通过提交mutations来改变，this.$store.commit()

actions: 异步的mutations，可以通过dispatch来分发从而改变state

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

3.高级用法-数据持久化

vuex里面存放的数据，页面一经刷新会丢失：

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

在vuex中可以通过安装vuex-persistedstate 插件，进行持久化的配置就行

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

1. 有那几个辅助函数(4大金刚)
mapState,mapActions,mapMutations,mapGetters
2. 辅助函数可以把vuex中的数据和方法映射到vue组件中。达到简化操作的目的

3. 如何使用：

Import { mapActions, mapGetters, mapMutations, mapState } from 'vuex'

如何使用vuex？

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>

数据持久化的使用

import createPersistedState from 'vuex-persistedstate'

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

5. 高级语法---- 模块化管理数据 （modules）

1. 什么时候需要用到模块管理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("user/SET_USERID",12345)// 前面是指定模块user 中的SET_USERID 方法，后面是传参 可以是对象、数组、字符串等

mapState,mapActions,mapMutations,mapGetters辅助函数如何使用

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