使用vuex

一、准备工作

1.下载口令

//vuex和持久化
npm install vuex --save
npm install --save vuex-persistedstate

2.创建

//
import Vue from 'vue';
import Vuex from 'vuex';
import persistedState from 'vuex-persistedstate';
Vue.use(Vuex);
const store = new Vuex.Store({
  state:{},
  getters:{},
  mutations:{},
  actions:{},
  plugins: [persistedState()]
})
export default store;

3.引入

//在main.js文件中
import store from './store/store';
new Vue({
  render: h => h(App),
	store,
}).$mount('#app')

二、使用

1.getters

场景：比如筛选出state中符合条件的数据，在其他页面使用

//步骤(1) 在store.js中：
 state:{
   	list: [
		{ text: '11111', done: true },
		{ text: '222222', done: false }
	]
  },
  //作用：相当于计算属性
	getters:{
		getListTrue:state=>{ //此方法：返回done:true的数据
			return state.list.filter(item =>item.done)
		}
	},

//步骤(2): 在其他页面使用
 <div>{{$store.getters.getListTrue}}</div>

2.mutations

场景：比如登录后把userInfo放到state中，方便其他文件使用

//步骤(1): 在store.js中
state:{
    userInfo:null,
},
//作用：修改state中的数据
mutations:{
	updateUserInfo(state,msg){
		state.userInfo = msg
	},
},

//步骤(2): 其他页面使用
<el-button type="primary" @click="getUserInfo">点击</el-button>
 methods:{
	getUserInfo(){
		let obj = {
			phone:'16837528018',
			userName:'暖风'
		}
		//第一个参数，通过commit调用mutations中的方法；第二个参数：传参
		this.$store.commit("updateUserInfo",obj)
	},
}

3.state

场景：其他页面使用用户个人信息userInfo

//(1) 引入
import { mapState } from "vuex";
//(2) 在计算属性中
computed:{
...mapState([ 'userInfo'])
},
//另一种写法
// computed:{
// 	...mapState({
// 		userInfo: state=>state.userInfo
// 	})
// },

//(3) 使用
 <div>{{"用户账号："+userInfo.phone}}</div>
 <div>{{"用户名："+userInfo.userName}}</div>

4.actions

场景：放异步请求

// 
actions:{
	// 通过commit()
	//页面中使用通过this.$store.dispatch()调用方法
}

5.modules

场景：以上属性内容过多，分模块管理，清晰明了

//(1) 新建modules/login.js
const state = {
  useName: "sam"
};
const mutations = {
 
};
const actions = {
 
};
const getters = {
 
};
 export default {
  state,
  mutations,
  actions,
  getters
}

//(2)在store.js中引入
import login from './modules/login.js';
const store = new Vuex.Store({
	modules:{
		 login: login
	 }
})

export default store;

// (3)使用：$store.state.模块名.数据
	 <div>{{$store.state.login.useName}}</div>