【Vuex】属性详解

使用属性之前的准备工作

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等