vuex详解还有使用

1.什么是vuex?

vuex是一个专为Vue.js应用程序开发的状态管理模式.。

2.vuex由五部分组成

• state:数据
• actions:可以包含异步操作
• mutations:唯一可以修改state数据的场所
• getters:类似于vue组件中的计算属性，对state数据计算（会被缓存）
• modules:模块化管理store(仓库)，每个模块用域自己的state,mutation,action,getter。

3.如何使用

//调用vuex里面state的数据
{{$store.state.token}}
//调用vuex里面的mutations中的方法
created(){
    this.$store.commit('to_token',123456)
}
//调用acionts中的方法
this.$store.dispatch('set_token',12345);

4.高级用法-数据持久化插件

问题：存储在vuex中的状态,刷新页面，会丢失。

为了解决刷新页面数据丢失,才有了数据持久化。

最简单的做法就剩利用插件vuex-persistedstate。

1.安装

cnpm install vuex-persistdState -s

备注：

npm install name -save 简写（npm install name -S） 自动把模块和版本号添加到dependencies。（dep是在生产环境中要用到的）

npm install name --save-dev 简写（npm install name -D） 自动把模块和版本号添加到devdependencies。（dev是在开发环境中要用到的）

使用：

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

5.高级语法-值 模块化赶路数据

1.什么时候需要用到模块管理vuex数据。

项目庞大，数据信息量特别大的时候，我们可以考虑模块形式管理数据，比如管理用户信息数据，和管理购物车数据，还有管理商品信息数据。

配置：

import Vue from 'vue'
import Vuex from 'vuex'

import bus from './module/bus'
import app from './module/app'

Vue.use(Vuex)
export default new Vuex.Store({
    state: {
        // 这里是根vuex状态
    },
    mutations: {
        // 这里是根vuex状态
    },
    actions: {
        // 这里是根vuex状态
    },
    modules: { // 子vuex状态模块注册
        namespaced: true, // 为了解决不同模块命名冲突的问题
        app,
        bus
    }
})

引入：

// 使用模块中的mutations、getters、actions时候，要加上模块名，例如使用commint执行mutations时
// 格式： 模块名/模块中的mutations
this.$store.commit("app/setUser", user)

// 获取属性时同样加上模块名
this.$store.state.app.user 

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

1. 有那几个辅助函数(4大金刚)
mapState,mapActions,mapMutations,mapGetters

2. 辅助函数可以把vuex中的数据和方法映射到vue组件中。达到简化操作的目的