vuex的使用方法？

1、什么是Vuex？

vuex是一个专门为vue.js设计的集中式状态管理架构。状态？我把它理解为在data中的属性需要共享给其他vue组件使用的部分，就叫做状态。简单的说就是data中需要共用的属性。

2、vuex概念

五个核心：

state： 存储数据的地方

actions： 异步操作

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

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

moduleas：模块化 modeA, modeB，modeC

3、引入Vuex（前提是已经用Vue脚手架工具构建好项目）

1、利用npm包管理工具，进行安装 vuex。在控制命令行中输入下边的命令就可以了。

npm install vuex --save

2、新建一个store文件夹（这个不是必须的），并在文件夹下新建store.js文件，文件中引入我们的vue和vuex。

import Vue from ‘vue’;
import Vuex from ‘vuex’;

3、使用我们vuex，引入之后用Vue.use进行引用。

Vue.use(Vuex);

4、在main.js 中引入新建的vuex文件

import storeConfig from ‘./vuex/store’

5、再然后 , 在实例化 Vue对象时加入 store 对象 :

new Vue({
el: ‘#app’,
router,
store,//使用store
template: ‘’,
components: { App }
})

4、创建仓库

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

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

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

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

5、vuex高级篇1 、语法糖辅助函数

语法糖，四大金刚辅助函数：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"
    })
}

6、高级篇2、 modules 模块化管理数据

1、状态树结构复杂的时候，可以用modules进行管理。
2、多人协同开发，可以用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'])
}

7、vuex 数据持久化

刷新页面，数据丢失、清空。有时候我们需要把一些数据固话到本地，即使刷新也不能清空，例如：登陆状态、token等。这是就需要用到vuex数据持久化。

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
})] //会自动保存创建的状态。刷新还在
}
})

1.createPersistedState()可配置的参数
2.key:storage名称，所有的数据会存储到一个key里面，默认：vuexs
3.storage：数据存储位置，默认：localStorage。也可以设置sessionStorage。