VUEX

状态管理，多个组件有共享数据的时候，就叫状态管理

什么情况下会用到vuex ,  如果你不知道vuex的情况也能完成你的需求，就说你的项目中不需要用到状态管理。

组件层级比较复杂的时候，还是用组件传值的方式来传值，那么就会很不方便，给我们的开发造成一些不必要的麻烦，使用了vuex之后，提供统一的api, 管理起来也很放方便，提高了开发效率。

状态管理，可以看做是一个仓库。  这个仓库可以是所有的组件都可以去这个仓库里面去数据。（就消除了层级的问题）

官网：https://vuex.vuejs.org/zh/index.html

现在版本是vuex4.x，它是支持vue3的

如果是vue2的版本，使用是vuex3.x

但是4.x也不是最新的版本。 pinia是最新版（网称：大菠萝）

使用

因为我们使用脚手架创建项目的时候，已经选择vuex, 所以呢可以直接在项目中使用。

但是如果在创建项目的时候，没有选择上，就需要我们手工安装。

npm i vuex

vuex也是一个插件，所以需要在main.js  使用use（）来加载插件。

1.使用方式

router/index.js //文档路径

// 1.从vuex导入了一个创建仓库的方法

import { createStore } from 'vuex'

// 2.然后使用了这个方法创建了一个仓库对象,然后导出

const store = createStore({

  state: {       //用来存放共享的数据的,类似全局的data

  },

  getters: {   //提供统一取数据的方法  // 如果取都有相同的操作就可以定义在这里(就像是以全局的computed)

  },

  mutations: {

  },

  actions: {

  },

  modules: {

  }

})

export default store

main.js

import { createApp } from 'vue'

import App from './App.vue'

import router from './router'

import store from './store'   //  ./store/index.js

const app = createApp(App)

app.use(store)  // 3.在vue实例中挂载了这个仓库.

app.use(router)

app.mount('#app')

state

用来存放共享的数据的,类似全局的data

store/index.js

const store = createStore({

  state: {  // 用来存放共享的数据的,类似全局的data

   count: 18,

   list: [2,3,3,4,5,88,22,33,11],

   age: 20,

   name: 'young'

  },

})

几种取的方式

直接取

<div>{{ $store.state.count }}</div>

通过计算属性取

computed:{

   // 当前页面要多次调用仓库的数据. 还用上面的方法的话,就重复的代码太多了,不方便维护

   // 可以结合计算属性来调用. 把仓库中要取的值,当做计算属性的依赖就可以了.

   // 虽然结合计算属性可以方便的一点的调用,但是还是有代码冗余,所以vuex中就提供了辅助函数给我们更方便的调用数据

   // 具体的使用方法看AboutView.vue

   count(){

     return this.$store.state.count

   },

   list(){

     return this.$store.state.list

   },

   age(){

     return this.$store.state.age

   },

   name(){

     return this.$store.state.name

   }

  },

通过辅助函数mapState取

<script>

  // 要在这个组件中取到多个共享数据

  // 可以使用mapState()来帮助我们生成计算属性

  // 1. 先导入mapState方法

  import { mapState } from 'vuex'

  export default {

   data(){

     return {

       count: 0

     }

   },

   computed:{

    // 2

     // mapState是一个函数

     // 可以接收一个数组参考

     // 数组里面的每一项就是要取仓库中字段

     ...mapState(['count','list','age','name'])

   }

  }

</script>

getters

提供统一取数据的方法  // 如果取都有相同的操作就可以定义在这里(就像是以全局的computed)

store/index.js

const store = createStore({

  state: {  // 用来存放共享的数据的,类似全局的data

   list: [2,3,3,4,5,88,22,33,11],

  },

  getters: {  // 提供统一取数据的方法  // 如果取都有相同的操作就可以定义在这里(就像是以全局的computed)

   // 把list过滤一遍里面呢只有偶数

   getevenList(state){

     const oulist = state.list.filter(item=>{

       return item%3 == 0

     })

     return oulist

   }

  }

})

在组件中使用

直接使用

this.$store.getters.getevenList

使用辅助函数 mapGetters

<script>

  // 导入 mapGetters 方法

  import { mapGetters } from 'vuex'

  export default {

   computed:{

     ...mapGetters(['getevenList']),

   }

  }

</script>

mutations

修改数据的方法 （只能写同步代码，不能写异步）

const store = createStore({

  state: {  // 用来存放共享的数据的,类似全局的data

   count: 18,

   age: 20,

  },

  mutations: { // 修改数据的方法

   changeCount(state){   // 提供了一个修改state.count的方法

     state.count++

   },

   changeAge(state){

     state.age++

   }

  },

})

直接通过$store.commit()调用

methods:{

   changecount(){

     // 虽然可以这么改,但是不建议这么做, (不好追踪的修改)

     // 既然是仓库中的数据,就要使用仓库中的方法去修改

     // this.$store.state.count = 100      

     // console.log(this.$store.state.count)

     // 要使用$store的commit() 来触发mutations

     this.$store.commit('changeCount')

   },

   changeage(){

     this.$store.commit('changeAge')

   }

  },

通过mapMutations 辅助函数生成对应的方法来调用

<div>

  <button @click="changeCount">修改count</button>

  <button @click="changeAge">修改age</button>

</div>

<script>

  import { mapGetters } from 'vuex'

  // 导入 mapMutations 的方法

  import { mapMutations } from 'vuex'

  export default {

   methods:{

     ...mapMutations(['changeCount','changeAge'])

     // 就相当于是在方法中定义了这两个方法来触发mutations

   },

  }

</script>

actions  异步修改数据的方法

虽然是异步,但是也要通过mutations去修改

import myaxios from '@/utils/axios'

// 1.从vuex导入了一个创建仓库的方法

import { createStore } from 'vuex'

const store = createStore({

  state: {  // 用来存放共享的数据的,类似全局的data

   age: 20,

   mylist: []   // 定义数组保存数据

  },

  mutations: { // 修改数据的方法  (同步)

   changeAge(state){

     state.age++

   },

   setList(state,list){  

     // 定义一个mutations 来修改数组, 转进来什么就修改什么

     state.mylist = list

   }

  },

  actions: {   // 异步修改数据的方法

   // 虽然是异步,但是也要通过mutations去修改

   asyncChangeAge(context){    // context就是相当于仓库对象 , $store  

     console.log(context)

     // 3秒后再修改age

     setTimeout(()=>{

       context.commit('changeAge')

     },3000)

   },

   asyncSetList(context){

     // 需求： 要请求接口拿到数据后，再给state, 这个请求是异步， 所以就要写在actions中

     myaxios.get('city').then(res=>{

       // console.log(res)

       if(res.status==0){

         context.commit('setList', res.data.cities)

       }

     })

   }

  },

})

通过$store.dispatch() 调用

this.$store.dispatch('asyncChangeAge')

this.$store.dispatch('asyncSetList')

modules 

把仓库分成一个一个小仓库（模块化）

小仓库都可以写vuex特有的4个属性： state getters mutations action

state 得是函数然后返回一个对象

store/user.js    专门用于存放用户信息的仓库

const user = {   // 用来保存用户的一个小仓库

  namespaced: true,    // 命名空间, 调用里面的方法就要通过仓库名称

  state(){

   return {

     name:'young',

     age: 18

   }

  },

  mutations: {

   changName(state){

     state.name = 'yyds'

   },

   changeAge(state){

     state.age++

   }

  }

}

export default user

store/index.js    挂载这个user仓库

import { createStore } from 'vuex'

import user from './user'

const store = createStore({

  modules: {    // 仓库模块化

   // 在这个modules中加载一个小仓库

   user:user

  },

})

export default store

在 组件中使用小仓库的数据

要通过小仓库的名称

{{this.$store.state.user.name}}--{{ this.$store.state.user.age}}

小仓库有命名空间，调用方法的时候也要加上小仓库的名称

this.$store.commit('user/changName')

this.$store.commit('user/changeAge')

plugins

插件： 就是一个函数

仓库初始化好了之后会调用一次，修改的时候也会调用subscribe()

import { createStore } from 'vuex'

const store = createStore({

  state: {

   count: 0

  },

  mutations:{

   changeCount(state){

     state.count++

   },

   setCount(state,num){

     state.count = num

   }

  },

  plugins: [(store)=>{  

   /*

     1.先判断再storage中没有存的值

       有 - 赋值给state.count

       没有  -  把默认值存在storage中

     2. 修改的时候同步更新到storage

   */

   // vuex 初始化好了之后就会触发这个方法

   // console.log(store.state.count)

   const local = localStorage.getItem('vuex')

   // console.log(local)

   if(local){

     const s  = JSON.parse(local)

     // console.log(s)

     // store.state = s

     store.commit('setCount',s.count)

   }else{

     localStorage.setItem('vuex',JSON.stringify(store.state))  

   }

   store.subscribe((mutation, state)=>{

     // 只要有修改了就会触发这个方法

     // console.log(state)

     localStorage.setItem('vuex',JSON.stringify(state))

   })

  }]

})

export default store

vuex持久化插件

vuex-persist

1.安装

npm i vuex-persist

2.使用插件

import { createStore } from 'vuex'// 1. 导入vuex-persist的插件

import VuexPersistence from 'vuex-persist'// 2. 创建vuex-persist插件的实例

const vuexLocal = new VuexPersistence({  storage: window.localStorage  // 指定用那种储存方式})

const store = createStore({  state: {    count: 0,    name: 'young'  },  

mutations:{    changeCount(state){      state.count++    },   

 setCount(state,num){      state.count = num    }  },  // 3. 使用插件  

plugins: [vuexLocal.plugin]})

export default store