使用属性之前的准备工作
vue_cli脚手架创建项目，一般都会选择安装了vuex。
如果没有安装的过的话，可以使用在自己的项目的根目录中使用如下的命令进行安装 ，另外可以通过@指定版本号
npm install vuex@3.4.0 --save
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex);
//接口文件，用到的时候根据自身项目写
const api = require('../common/api.js')
export default new Vuex.Store({
state:{
}
})
state区域
state属性是Vuex中用于存放组件之间共享的数据
state: {
userinfo: null,
},
- state在html页面中的使用,直接使用 $store.state.状态名(变量名) 来访问 vuex 中的存储的状态(this省去)
- state在js页面中的使用,使用this.$store.state.状态名(变量名) 来访问 vuex 中的存储的状态
<div class="lable-items" v-for="(item, index) in $store.state.userinfo" :key="index" @click="decrementTypeLable(index)">
</div>
//使用方法
computed: {
userinfo() {
return this.$store.state.userinfo
}
},
getters区域
可以认为是 store 的计算属性。就像计算属性一样，getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。
功能就是将state中的值处理以后再返回结果
//没有使用getters前
this.$store.state.userinfo.filter(item => item.price<100).length
//但是当很多地方调用时，就可以调用getters里面的方法
//类似，获取用户信息中价格大于100的用户数量
//未来我会补充getters参数详情
getters: {
Getuserinfo: state => {
return state.userinfo.filter(item=> item.price<100).length
}
},
- 使用
//使用方法
computed: {
doneTodosCount () {
return this.$store.getters.Getuserinfo
}
},
mutations区域
是用来更改并记录元素的地方
- 接受一个state参数，第二个参数通过commit触发mutations函数时传递的自定义参数，第二个参数也可以是对象
- mutation必须是同步函数
- 并且只能通过store实例的commit()方法进行对应触发
setUserInfo(state, params) {
//类似
state.userinfo.num++ //修改状态中的数据
state.userinfo = params //接收commit的第二个参数
},
- 调用mutations
// 在组件中通过commit触发mutations中的函数
methods:{
onclick(){
this.$store.commit("setUserInfo","参数2")
},
}
actions区域
用来加工mutations的地方
- 不能直接改变state里的数据
- 通过[调用dispatch方法，间接使用内部commit来]触发mutations
- action允许使用异步方法(例如：定时器, 请求后端接口)，但每一步都要以mutation来记录状态
- 组件使用vuex中的元素，大都通过计算属性来访问
- 这里通常就会用到上方引入的接口文件
// 获取用户相关信息
getactUserInfo({
state,
commit
}) {
return new Promise((resolve, reject) => {
api.info().then(res => {
const data = res.data.data;
if (res) {
//拿到异步数据，调用mutations间接修改state数据
commit('setUserInfo', data);
resolve(data);
} else {
resolve("运行结果出错");
}
}).catch(err => {
reject(err)
})
})
},
- 使用
methods:{
//类似异步获取最新数据
UserInfo(){
this.$store.dispatch('getactUserInfo')
},
//还可以
//类似异步购物车数量++
add() {
this.$store.dispatch('add')
},
//类似点击异步增加购物车指定数量
less() {
this.$store.dispatch('less', this.cnt)
}
}
modules区域
是静态注册vuex模块的地方。每个选项都是一个模块
- 当应用复杂的时候，Vuex允许我们将store分割成模块(Module), 而每个模块拥有自己的state、mutation、action、getters等