学习vuex

一、Vuex是什么？

Vuex是一个专门为 Vue.js 应用程序开发的状态管理模式。Vuex的基本思想，就是单向数据流，一起来看一下Vuex实现单向数据流的示意图。

二、Vuex状态管理和传统全局变量的不同之处

1、Vuex的状态存储是响应式的：就是当你的组件使用到了这个Vuex的状态，一旦它改变了，所有关联的组件都会自动更新相对应的数据，这样开发者省事很多。 2.不能直接修改Vuex的状态：如果是个全局对象变量，要修改很容易，但是在Vuex中不能这样做，想修改就得使用Vuex提供的唯一途径：显示地提交（commint）mutations来实现修改。这样做的好处就是方便我们跟踪每一个状态的变化，在开发过程中调试的时候，非常实用。

三、Vuex的概念

五个核心：

state： 存储数据的地方

actions： 异步操作

mutations: 同步操作，只有mutations可以修改state中的数据

getters： 相当于 state的计算属性。

moduleas模块化 modeA, modeB，modeC

四、Vuex使用步骤

1、安装Vuex npm install vuex --save

**2、创建 store.js，引用vuex，创建仓库store。 **

import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) //数据 const state={ count:10 } //action 执行异步操作，不可以修改state数据 const actions={ getParamSync (context,Object) { //处理异步操作 setTimeout(()=>{ //3.通过commit提交一个名为getParam的mutation //action 函数接受一个与 store 实例具有相同方法和属性的 context 对象，因此你可以调用 context.commit 提交一个 mutation context.commit('increment',Object) },3000) } } //mutation 可直接修改state数据 const mutations={ increment(state,value){ state.count += value; }, decrement(state,value){ state.count -=value; } } //getter const getters = { newCount:state => state.count * 3 } export default new Vuex.Store({ state, mutations, actions, getters })

3、在 main.js中注册到根组件中

import store from './store/store.js' new Vue({ el: '#app', router, store, components: { App }, template: '<App/>' })

五、Vuex语法糖

当一个组件需要多个状态时，这些状态都声明成计算属性过于冗长。于是有了辅助函数。语法糖。四大金刚辅助函数：mapState、mapActions、mapMutations、mapGetters import {mapState,mapGetters,mapActions,mapMutations} from 'vuex' computed:{ ...mapState({ a:"a", // "a" 指的是state中的a b:"b" }), ...mapGetters({ Val:'newVal' // 可以重新命名 }) } methods:{ ...mapActions({ getSync:'getSyncNum' }) ...mapMutations({ increament:"increament" }) } <template> {{a}} {{b}} {{getSync(1)}} <button @click='increament(1)'></button> </template>

六、modules模块化管理

应用场景：

状态树结构复杂时多人协同开发时 //创建store，分模块定义 const test1 ={ namespaced:true, //开启命名空间，在各组件总 ...mapState("test1",{name:"name"}) state:{name:'test1'}, actions:{}, mutations:{ changeName(state,arg){ state.name=arg; }, getters:{} } const test2 = { namespaced:true, state:{}, actions:{}, mutations:{} }, getters:{} } new Vuex.Store({ state:{name:"root"}, actions, mutations, getters modules:{ test1, test2 } }) 在组件中使用： {{this.$store.state.name}} {{name}} {{this.$store.state.test1.name}} {{tes1Name}} computed:{ ...mapState({ name:“name" }), ...mapState('test',{ test1Name:'name' }) } methods:{ ...mapMutations('test1',['changeName']) }

七、Vuex数据持久化

刷新页面，数据丢失、清空。有时候我们需要把一些数据固定到本地，即使刷新也不能清空， 使用场景：

登陆状态token 1、安装 npm install vuex-persistedstate --save 2、在Vuex初始化的时候 import createPersistedState from 'vuex-persistedstate' const state = { user:{}, } export default new Vuex.Store({ state, getters, actions, mutations, plugins:[createPersistedState({ storage: window.sessionStorage })] //会自动保存创建的状态。刷新还在 } })

createPersistedState()可配置的参数:

key：storage名称，所有的数据会存储到一个key里面，默认：vuexstorage：数据存储位置，默认：localStorage。也可以设置sessionStorage。如上。

也可以使用 js-cookie 将状态保存在cookie，如下 首先安装js-cookie cnpm install js-cookie --save

import * as Cookies from 'js-cookie' import createPersistedState from 'vuex-persistedstate' const store = new Vuex.Store({ // ... plugins: [ createPersistedState({ storage: { getItem: key => Cookies.get(key), setItem: (key, value) => Cookies.set(key, value, { expires: 7 }), removeItem: key => Cookies.remove(key) } }) ] })

1、需要安装 js-cookie 2、getItem 加载保存的状态 3、setItem 保存状态 4、removeItem 删除保存的状态

默认持久化所有state，要想持久化指定state，配置如下：

const store = new Vuex.Store({ ... plugins: [createPersistedState({ storage: window.sessionStorage, 　　　 reducer(state) { return { // 只储存state中的list 和test1模块 list: state.list, test1:state.test1 } } })] })