Vuex

什么是vuex

vuex ：是一个专为vue.js开发的状态管理器，采用集中式存储的所有组件状态
vuex中可以存储组件中的公共的数据，比如token，购物车中的数据等等
vuex有五个属性：

state：用来存储数据的，在组建中用this.$store.state.属性名
getters：类似于计算属性，对state进行逻辑计算，在组建中用this.$store.getter.方法名
mutations：可以直接操作state中的属性，在组建中用this.$store.commit(方法名,传递的参数)（是同步的）
actions：可以操作mutations中的方法，，在组建中用this.$store.dispath(方法名,传递的参数)（异步操作）
module：可以分模块。项目庞大，数据信息量特别大的时候使用

vuex数据持久化

下载vuex-persistedstate插件（插件的原理其实也是结合了存储方式,只是统一的配置就不需要手动每次都写存储方法。）

下载命令
npm install vuex-persistedstate --save

备注：

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

引入及配置：在store下的index.js中

import createPersistedState from "vuex-persistedstate"

conststore =newVuex.Store({

  // ...

  plugins: [createPersistedState()]

})

默认存储到localStorage
想要存储到sessionStorage，配置如下

import createPersistedState from "vuex-persistedstate"

conststore = newVuex.Store({

    // ...

    plugins: [createPersistedState({

        storage:window.sessionStorage

    })]

})

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

1.什么时候用模块
项目庞大，数据信息量特别大的时候，我们可以考虑分模块形式管理数据，比如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

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

1.有那几个辅助函数

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

vuex的运行机制

在组建中通过dispath调用actions中的方法，在actions中通过commit调用mutations中的方法，mutations可以直接操作state中的数据，state中的数据一旦改变组件也会更改。