Vuex

1.vuex的概念

五个核心：

state:存储数据的地方
actions:异步操作
mutations:同步操作，只有mutations可以修改state中的数据
getters:相当于state的计算属性
modules:模块化

2.使用vuex的步骤

安装

npm install vuex --save

创建仓库

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

    //vuex 注册给vue
    Vue.use(Vuex);

    //数据中心
    const state={
        count:10
    }
    //actions 异步操作（定时器，ajax）
    const actions={
      
    }
    //mutations 同步修改state中的数据
    const mutations={
        increament(state,val){
            //state指的是 state数据中心
           state.count+=val;
        }
    }
    // getters  可以对state中的数据进行计算。（相当于组件中的computed）
    const getters = {
        newVal: (state)=> state.count*2
    }

    //实例化 仓库
    export default new Vuex.Store({
        state,
        actions,
        mutations,
        getters
    });

将store挂载到项目的vue实例中

//打开main.js
    import store from './store/index'

    //注入根组件
    new Vue({
        store,
        router,
        components:{xxxx}
    })

两种写法

 methods:{
         increament(){
             //两种手法
             //1. 通过dispatch()触发actions中的方法修改数据
             this.$store.dispatch('getSync',1)
             //2. 如果同步修改，通过commit()触发mutations中的方法修改。
             this.$store.commit('increament',1)
         }
     }

3.备注

只有commit()才可以触发mutations中的方法 （可以在组件中调用，也可以在actions中调用）
2. 只有dispatch()才可以触发actions中的方法 （只能在组件中调用）
 vuex 是单向数据流
4. 只有mutations才可以修改state中数据。
5. Es6 规范： 
   导入模块  ---> import stor from '路径'
   导出模块  ---> export default {}
   小小的注意：可以用es6中的解构赋值(按需导入)语法
   import { modea,modeb } from '/home/xxx.js'
6.公用的方法库：
     export default {a:function(){},b:function(){}}
     import {c}  from  '/A.js'

4.vuex 语法辅助函数

 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>

5.module 模块化管理

//创建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'])
}

注意：

...mapState("test1",['name']) ...mapState('test1',{newName:'name'})

展开数组，组件中不可以重命名

展开对象，可以重命名

6.数据持久化

什么是数据持久化

刷新页面，数据会丢失，清空，如果我们需要把一些数据存到本地，刷新也不清空，就可以用到vuex数据持久化

安装

npm install vuex-persistedstate --save

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里面，默认：vuex
s

storage：数据存储位置，默认：localStorage。也可以设置sessionStorage