vuex是什么:可以直接跳转VUE官网
以下是我对vuex的见解,vuex就是vue的状态管理工具,也可以叫做数据管理工具,通过vuex可以让vue中所有的页面获取到公共的数据。
一、vuex核心分别是:
1. state :这个是存放状态/数据的地方 (和vue页面的data有些许相似)
2. getters:这个是vuex的计算属性,也类似共享属性,可以用$store.getters来获取state中的数据
3. mutations:这是唯一可以改变state中状态/数据的途径*重点*
4. actions : 是异步的mutations,可以通过$store.dispatch分发从而改变state的数据
5. module :是vuex的模块化
二、vuex的基本使用
在项目根目录下创建一个store文件夹,在这个文件夹下再创建一个index.js,最后再main.js中引入并挂载到实例上去,之后现在那个页面使用就直接调用就行了。
三、vuex的持久化插件使用方法
因为vuex中存放的数据在页面刷新时会丢失,所以我们需要vuex-persist插件来解决这个问题。
在命令行工具里输入
npm i vuex-persist --save
然后在 store/index.js中引入后
import vuexPersist from "vuex-persist";
最后在和state同级添加以下代码就可以实现,vuex的持久化储存
plugins: [
new vuexPersist({
storage: window.localStorage,
}).plugin,
],
四、辅助函数(语法糖)
提到vuex的辅助函数四大金刚
分别为
mapState;mapActions;mapMutations;mapGetters
使用方法:
在需要使用的页面中引入
import {mapAction,mapMutations,mapState,mapGetters} from "vuex"
其中mapMutations,mapActions需要在mounted中使用方法如下
methods:{
...mapMutations({
"方法名字":vuex中时间名
})
}
其他两个则是在mounted中使用方法如下
<template>
<div>
<h5>{{name}}</h5>
</div>
</template>
<script>
mounted:{
//name是我们vuex中state的数据名
...mapGetters({"name"})
}
</script>
**撒花**
以下是我其他几个关于前端的内容希望对你有用