vuex简单理解

一. vuex是什么？

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式,可以实现数据之间的共享,它由五部分组成：
分别是：
state （用来存放数据）
actions （可以包含异步操作）
mutations （唯一可以修改state数据的场所）
getters （类似于vue组件中的计算属性，对state数据进行计算（会被缓存））
modules （模块化管理store（仓库），每个模块拥有自己的 state、mutation、action、getter）

二. vuex的使用步骤

代码如下（示例）：
在根目录下新建一个store文件夹，里面创建一个index.js文件，
最后在main.js中引入，并挂载到实例上，之后那个组件中需要用到vuex就调用就行

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
  	//存放数据  this.$store.state.xxx
	state: {},	
	// 唯一修改state的地方 this.$store.commit('事件名',参数)
	mutations: {},
	// 执行异步操作 		  this.$store.dispatch('事件名')
	actions: {},
	// 模块,每个模块拥有自己的state,mutations,actions,getters
	modules: {},
	// 计算state
	getters:{}   		  this.$store.getters.xxx
})

三. 高级用法（持久化工具）

vuex持久化工具vuex-persistedState
可以解决页面刷新之后数据会丢失的问题

1. 安装命令:

cnpm i vuex-persistedstate --save

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

2. 使用在store文件夹下面的index.js文件中引入

import persist from 'vuex-persistedstate'
const store = new Vuex.Store({
  state,
  mutations,
  actions,
  getters,
  plugins: [createPersistedState({
       storage: localStorage, // 定义数据存储的方式 值可以是localStorage 也可以是sessionStorage
    // 定义需要指定存储的数据 因为正常工作中vuex不是每一条数据都需要存储 所以我们需要指定需要存储的数据
    reducer(state) { 
    return {
       goods: state.goods
   }
})]
})

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

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

//都建立单独xxx.js的模块
//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

获取方式

获取user模块的`userid`
this.$store.state.user.userid
this.$store.commit("user/SET_USERID",12345)// 前面是指定模块user 中的SET_USERID 方法，后面是传参 可以是对象、数组、字符串等

五. 高级用法—辅助函数(语法糖)

辅助函数有如下4个:
mapState,mapActions,mapMutations,mapGetters
辅助函数可以把vuex中的数据和方法映射到vue组件中。达到简化操作的目的

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