说一下vuex

1. 什么是vuex?

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储 管理应用所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化

2. vuex能做什么

存储组件公共数据

 3. vuex的核心

• state 存储数据

• mutations 存储方法 用来直接操作state中的数据

• actions 存储方法 调用mutations中的方法 里面的方法返回的是promise对象可以实现异步操作

• getters 对state中的数据做逻辑计算 类似于computed

• modules 模块存储

• plugins 插件（持久化存储）

 4. vuex的运行原理

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

5. 如何使用

基本使用：

在vue的原型上有一个$store对象可以调用vuex的任何东西 

• state this.$store.state

• mutations this.$store.commit("方法名",参数) 参数只能传一个

• actions this.$store.dispatch("方法名",参数)

• getters this.$store.getters

• module this.$store.模块名.state

export default new Vuex.Store({
  state: {
  },
  mutations: {
  },
  actions: {
  },
  modules: {
  }
})

使用映射函数：

将vuex的中的成员映射到组件中然后使用

mapState mapMutations mapGetters mapActions

步骤：

• 在组件中导入需要的函数

  import {mapState,mapGetters} from "vuex"

• 映射函数在组件中对应位置

  • mapState --computed

  • mapGetters --computed

  • mapMutations--methods

  • mapActions--methods

• 语法

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"
  })
 }
}

6. vuex的持久化

1. 就是将vuex的数据存储在本地（localStorage sessionStorage）

   • 下载插件

      cnpm install vuex-persistedstate --save

   • 配置 store->index.js 

     import persistedState from 'vuex-persistedstate'
     默认的使用localStorage
     plugins: [persistedState()]
     还可以配置成sessionStorage
     plugins: [persistedState({storage: window.sessionStorage})]

7. vuex的优缺点  

vuex的优点：

        js 原生的数据对象写法, 比起 localStorage 不需要做转换, 使用方便 ​ 属于 vue 生态一环, 能够触发响应式的渲染页面更新 (localStorage 就不会) ​ 限定了一种可预测的方式改变数据, 避免大项目中, 数据不小心的污染 ​

vuex的缺点：

        刷新浏览器，vuex中的state会重新变为初始状态 ​ 解决方案-插件vuex-persistedstate

8.  模块化管理数据 （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