项目笔记整理06-vuex状态管理器的使用

1.在vuex中设置（异步调用数据）

ps：cli脚手架中选择安装时带有vuex，所以没有单独再次安装

 import Vue from "vue";
 import Vuex from "vuex";
 import { userLogin } from '../api/api';

 Vue.use(Vuex);

 export default new Vuex.Store({
   state:{//要设置的全局访问的state对象
    tokens:'',
    changeNum:10050805

  },
  getters:{//实时监听state值的变化(最新状态)
    getTokens(state) {  //承载变化的tokens的值
      return state.tokens
    }

  },
  mutations:{//唯一可以改变state内的数据
    setTokens(state,value){
      state.tokens = value
    }
  },
  actions:{
    passTokens({commit,info}){
      userLogin(info).then(res=>{ 
        // console.log(res)//必须在页面中dispatch才能触发获取到数据
        if(res.data.token){
          commit('setTokens',res.data.token)
        }else{
          commit('setTokens','132')
        }
         
     })
  }
}

});

<1>在state中定义数据字段

<2>Getter相当于vue中的computed计算属性，Getters 可以用于监听、state中的值的变化，返回计算后的结果，getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。

<3>mutations是个对象变量，都是同步事件方法，唯一可以更改state的方法。通过commit：同步操作提交给mutations数据。写法：this.$store.commit(‘mutations方法名’,值)

<4>actions是个对象变量，里面的action方法可以进行异步操作，这里面的方法是用来异步触发mutations里面的方法。通过dispatch派发。例如向后台提交数据，写法： this.$store.dispatch(‘action方法名’,值)

1.2.vuex写法02

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
 const state={   //要设置的全局访问的state对象
     showFooter: true,
     changableNum:0
     //要设置的初始属性值
   };
const getters = {   //实时监听state值的变化(最新状态)
    isShow(state) {  //承载变化的showFooter的值
       return state.showFooter
    },
    getChangedNum(){  //承载变化的changebleNum的值
       return state.changableNum
    }
};
const mutations = {
    show(state) {   //自定义改变state初始值的方法，这里面的参数除了state之外还可以再传额外的参数(变量或对象);
        state.showFooter = true;
    },
    hide(state) {  //同上
        state.showFooter = false;
    },
    newNum(state,sum){ //同上，这里面的参数除了state之外还传了需要增加的值sum
       state.changableNum+=sum;
    }
};
 const actions = {
    hideFooter(context) {  //自定义触发mutations里函数的方法，context与store 实例具有相同方法和属性
        context.commit('hide');
    },
    showFooter(context) { 
        context.commit('show');
    },
    getNewNum(context,num){   //num为要变化的形参
        context.commit('newNum',num)
     }
};
  const store = new Vuex.Store({
       state,
       getters,
       mutations,
       actions
});
export default store;

1.3.可以进行拆分，以上为集中设置在store.js文件中。

（1）在store.js中注册vuex,引入拆分的几个

import Vue from 'vue'
import Vuex from 'vuex'
import * as state from './state'
import * as getters from './getters' // 导入响应的模块，*相当于引入了这个组件下所有导出的事例
import * as actions from './actions'
import * as mutations from './mutations'
 
Vue.use(Vuex)
 
// 注册上面引入的各大模块
const store = new Vuex.Store({
    state,    // 共同维护的一个状态，state里面可以是很多个全局状态
    getters,  // 获取数据并渲染
    mutations, // 处理数据的唯一途径，state的改变或赋值只能在这里
    actions  // 数据的异步操作
})
 
export default store  

(2)在state.js中设置接收数据

const state = {
	token:"",
}
export default state

(3)在mutations中设置：

const mutations = {
	setToken(state, tokens){ // 获取tokens
	    state.token = tokens // 把方法传递过来的参数，赋值给state中的token
	}
}
export default mutations

(4)在actions中设置：

const actions = {
	passToken(context,token){
		context.commit("setToken",token)
	}
}
export default actions

2.页面中的派发和使用

2.1一般形式的派发：

//派发数据----------------------------------------------------
//(异步操作)
this.$store.dispatch("passToken",{ token:"1005xz0203aa" }）
//（同步操作）
this.$store.commit("setToken","1005xz0203aa")
//获取数据---------------------------------------------------
this.$store.state("token")
this.$store.getters("token")

2.2辅助函数：语法糖形式

import {mapState,mapGetters,mapMutations,mapActions} from 'vuex';
//语法糖派发数据----------------------------------------------
methods: {
	//-------------------------------------------------------
    ...mapActions(['passToken']),
    actionToken(params) { //params为要保存的参数
      this.passToken({ token:"1005xz0203aa" });
    },
    //--------------------------------------------------------
    ...mapMutations({
		addToken:'passToken',
		getting:'passToken'
	}),
	mutationToken(){
		this.addToken()
	},
	gettingNum(){
		this.getting()
	}
},

//语法糖获取数据---------------------------------------------
 computed: {
    // 方法一：设置别名，比如this.$store.state.cityID可以用this.cId替代
    ...mapState({
       cToken: state => state.token,
     }),
    ...mapGetters({
		gToken: state => getters.token,
	})
   // 方法二：
    ...mapState({
       cToken: 'token'
     }),
     ...mapGetters({
       gToken: 'token'
     })
   // 方法三(不设置别名，直接使用this.cityID即可)：
    ...mapState(['token'])
    ...mapGetters(['token'])
 }