vuex详解

安装vuex

npm i vue-vuex // 安装vuex
vue add vuex // 生成vuex文件

1.state

state是vuex的状态存储 ，使用: this.$store.state.名字.

2.mutations

mutations官方提供唯一修改state数据的方法， 在modules中mutations只能修改当前文件中的state
使用 $store.commit(‘事件明’，‘传递的参数’) 智能传递一个对象或者一个值 在mutations中的函数只有两个形参，第一个是自己模块本身的数据，第二个是我们前面过来的

3.getters

getters相当vue中的计算属性，计算结果会缓存，使用$store.getters.函数名 获取到数据
函数中的第一个形参能获取到所有的state包括模块中的，在模块化中只能获取当前模块中的state
第二个形参可以获取所有的getters的结果
第三个形参所有的state数据
写函数的时候需要把要使用的值 return 出去

4.actions

actions异步调用mutations的方法 通过 $store.dispatch(‘事件名’) 进行调用
函数中的一个参数 包含
state 所有的state
commit 调用mutations改变state状态
getters 获取所有的getters的结果
rootGetters
rootState

5.modules

模块化管理 新建一个vuex.js 书写导出 export default { 内容同store.index.js结构一样 }
在index.js 中 使用 import 名字 from ‘文件路径’
引入完之后吧名字 放在 moudules:{}中

6.plugins

存放vuex插件的地方 是一个数组
例：npm i vuex-persistedstate -S 安装vuex固化插件

 improt persistedstate from 'vuex-persistedstate' 
 plugins:[ persistedstate( {
      storage:sessionStorage, //存储的方式 localStorage或sessionStorage
      reducer(state){
       return{
			 tasks:state.tasks//选择要保存的数据
			}
      	}
} ) ] 

7.vuex辅助函数

mapState mapMutations mapActive mapGetters 四大辅助函数 把vuex中的对应数据方法映射到组件中，
mapState mapGetters 在computed 使用
mapMutations mapActive 在methods使用 例：

...mapState([
          "list"//需要映射的数组，用this.list使用
      ]),

8.v3 setup使用

import { useStore } from ' vuex ' 
let store=useStore() // 这时的 store 就相当于 this.$store 了