【Vuex概念 + Vuex基本操作 + 持久化插件的使用 + Vuex中的辅助函数】

Vuex官网

一、什么是Vuex

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。 它分为五部分组成： state、actions、mutations、modules、getters

• state 存放数据
• actions 异步请求
• mutations 修改state里边的数据，只能用它来修改
• modules 分模块化开发
• getters 计算数据

state

使用方法：获取state里边数据 $store.state.list (list是你定义那个数组名字)

actions

使用方法： 在里边写完请求，在组件中通过 this.store.dispatch(‘参数一调用你写的请求名’,‘传的参数’)

export default new Vuex.Store({
  //存放数据
  state: {
    count: 5, 
  },
  //2.接受dispatch传递过来的方法和参数
  actions: {
    getParamSync (context,val) {
	    //处理异步操作
        setTimeout(()=>{
	        //3.通过commit提交一个名为getParam的mutation
	        //action 函数接受一个与 store 实例具有相同方法和属性的 context 对象，因此你可以调用 context.commit 提交一个 mutation
            context.commit('increment',val)
        },3000)
    }
  }
})

mutations

使用方法：修改state里边的数据，只能用它来修改

 const store = new Vuex.Store({
    //state存储应用层的状态
    state:{
        count:5  //总数：5
    },
    mutations:{
        increment(state，value){
            state.count += value;
        }
    }
 });

getters

使用方法：它是一个计算属性，获取方法 $store.getters.(计算里边那个函数名)

二、Vuex的安装

1 .安装Vuex

npm install vuex --save

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

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

安装持久化插件

1、安装

npm install vuex-persistedstate

2 . 在store.js里

import createPersistedState from 'vuex-persistedstate'
const state = {
    user:{},
}
export default new Vuex.Store({
    state,
    getters,
    actions,
    mutations,
    plugins: [createPersistedState()]//会自动保存创建的状态。刷新还在
});

3 . 组件中获取

vuex里面存放的数据，页面一经刷新会丢失：
解决办法： 存放在localStorage或者sessionStorage里面，进入页面时判断是否丢失，丢失再去localStorage或者sessionStorage里面取；
在app.vue根组件的created里面判断是否丢失，在进行上面的操作；

 created(){

      if(localStorage.vuex){
          this.list=JSON.parse(localStorage.vuex)
      }

  },

辅助函数

一、高级用法 辅助函数分为四种

（1）、辅助函数分别是那几个（四大金刚）

• mapState、mapActions、mapMutations、mapGetters、

辅助函数的作用： 将vuex里边的数据央射到Vue的组件中

（2）如何获取？

mapState、mapGetters、
这两个辅助函数需要在 computed 里边进行获取，它依靠计算属性的特点 ‘当跟它有关的值发生变化会从新计算，无关的值发生变化就会从缓存中拿’

mapActions、mapMutations、
这两个分别是在 methods里边进行获取

获取的方法如下

第一步先引入：import { mapState, mapActions, mapMutations, mapGetters } from "vuex";

用辅助函数(简称为 语法糖) 可以分为 对象试、数组试获取两种方式，数组如果想获取多个，就在后面写他们的名字即可

state

  state: {
    list:'看我'
  },

computed: {
    // mapState的语法糖
    ...mapState({
      list: "list",
    }),
  },

Getters

 state: {
    list:'看我'
  },
  
getters:{
    num(state){
      return state.list + '啦啦啦'
    }
  }

 computed: {
    // mapGetters的语法糖
    ...mapGetters({
      num: "num",
    }),
  },

mapMutations

 state: {
    list:'看我'
  },

 mutations: {
    add(state,i){
      state.list = i
    }
  },

methods:{
 // mapMutations的语法糖
    ...mapMutations(["add"]),

// 当我们用辅助函数获取之后，还可以通过事件进行传参，比如：

top(){  //top是事件名
this.add('需要传的内容')     //这里调用的话需要通过 this.辅助函数名进行调用
  }
}

mapActions

mapActions是用来异步请求的，里边有个 'content'，它主要是用来关联上下文的，通过 content .commit 将内容提交到 mutations 里边，然后在进行修改state里边数据的

  state: {
    list:'看我'
  },
  mutations: {
    add(state,i){
      state.list = i
    }
  },
  actions: {
    getlist(content,val){
      content.commit('add',val)
    }
  },

methods:{
//mapActions的语法糖
   ...mapActions(['getlist']),
    tab() {
      this.$store.dispatch('getlist','我是你爸爸')
    },
  }

modules 重点

modules它是一个分模块化，主要使用与比较大的项目中，解决内容的繁琐，分模块化管理，方便我们的维护与管理

项目比较大的时候才用模块化

index.js

import Vue from 'vue'
import Vuex from 'vuex'
import user from "./user"  //``引入你创建的 user模块``
import cart from "./cart"  //``引入你创建的 cart模块``
Vue.use(Vuex)
export default new Vuex.Store({
  state: {},
  mutations: {},
  actions: {},
  modules: {
    user,   //``模块名``
    cart    //``模块名``
  },
  getters:{}
})

user.js

export default({
    namespaced:true,   //``加上它的话，表示这个模块是一个独立模块``
    state:{
        data:'看你咋滴'
    },
    mutations:{
        adds(state,i){
            state.data = i
        }
    },
    actions:{
        getdata(content,val){
            content.commit('adds',val)
        }
    },
    getters:{},
    modules:{},
})

cart.js

export default({
    namespaced:true,  //``加上它的话，表示这个模块是一个独立模块``
    state:{},
    mutations:{},
    actions:{},
    getters:{},
    modules:{},
})

如何获取分模块中的子模块?

获取子模块的话你需要在你写的组件中引入：

import { createNamespacedHelpers } from "vuex";
const {mapState: mapStateUser,mapActions: mapActionUser,mapMutations: mapMutaionuser,} = createNamespacedHelpers("user");

mapStateUser、这是在computed里边获取
mapActionUser、mapMutaionuser、这是在methods里边获取

state

获取子模块中state中的数据 这里的 user 要跟你index.js中的 modules中引入的名字一样

第一种方法：

{{$store.state.user.data}}

第二种方法：

computed：{
  ...mapStateUser({
      datas:'data'      //在上面使用 {{datas}}
    })
}

mutations

第一种方法：

 ...mapMutaionuser({    //通过扩展运算符进行获取 ...
      adds:'adds'
    }),
    
    tab() {
      this.adds('1212')   //这里调用的话需要通过this.辅助函数名
    },

第二种方法：

mapActions

第一种方法：

 //mapActionUser的语法糖
    ...mapActionUser({
      getdata:'getdata'
    }),

    tab() {
      this.getdata('阿巴阿巴')
    },

第二种方法：

Getters

第一种方法：

 state:{
        data:'看你咋滴'
    },

 getters:{
        num(state){
            return state.data + '啦啦啦啦'
        }
    },

 ...mapGettersuser({   //这是在页面中获取
      num:'num'
    })