Vuex有那几种状态和属性?

vuex的流程

页面通过mapAction异步提交事件到action。action通过commit把对应参数同步提交到mutation。mutation会修改state中对于的值。 
最后通过getter把对应值跑出去，在页面的计算属性中，通过mapGetter来动态获取state中的值

vuex有哪几种状态和属性

有五种,分别是State , Getter , Mutation , Action , Module (就是mapAction)

vuex的State特性是？

stae就是存放数据的地方，类似一个仓库 , 特性就是当mutation修改了state的数据的时候，他会动态的去修改所有的调用这个变量的所有组件里面的值（ 若是store中的数据发生改变，依赖这个数据的组件也会发生更新 ）

vuex的Getter特性是？

getter用来获取数据，mapgetter经常在计算属性中被使用

vuex的Mutation特性是？

Action 类似于 mutation，不同在于：

Action 提交的是 mutation，而不是直接变更状态。

Action 可以包含任意异步操作

vuex的优势：状态管理工具 核心是响应式的做到数据管理, 一个页面发生数据变化，动态的改变对应的页面。

举例：提交

  import {mapGetters} from 'vuex'
        computed: {
            ...mapGetters([
                'getRightOrderId',
                'getUserInfo'
            ]),
        },

 let newObj = {...data.data};
 this.$store.commit('setUserInfo', newObj)

action.js

 const actions = {

}
 export default  actions

getters.js

const getters = {
	getRightOrderId(state){
		return state.rightOrderId
	},
	getRightKMOrderId(state){
		return state.KaMitOrderId
	},
	getShowOrderPlat(state){
		return state.showRightPlat
	},
}


export  default getters

mutation.js

import  {setSession} from "../../utils/utils";

const mutation = {
	setRightOrderId(state,newVal){
		state.rightOrderId = newVal;
	},
	setRightKMOrderId(state,newVal){
		state.KaMitOrderId = newVal;
	},
	setShowRightPlat(state,newVal){
		state.showRightPlat = newVal
	},

};

export default  mutation

state.js

import {getSession} from "../../utils/utils";
const state = {
	rightOrderId: 0, //默认订单id
	openid: 0,
	userInfo:{     //用户登录信息
		nickname:JSON.parse(getSession('USER_LOGIN_INFO')) ? JSON.parse(getSession('USER_LOGIN_INFO')).nickname:'' ,
		wx_nickname:JSON.parse(getSession('USER_LOGIN_INFO')) ? JSON.parse(getSession('USER_LOGIN_INFO')).wx_nickname:'' ,
		qq_nickname:JSON.parse(getSession('USER_LOGIN_INFO')) ? JSON.parse(getSession('USER_LOGIN_INFO')).qq_nickname:'' ,
		account:JSON.parse(getSession('USER_LOGIN_INFO')) ? JSON.parse(getSession('USER_LOGIN_INFO')).account:'' ,
		token:JSON.parse(getSession('USER_LOGIN_INFO')) ? JSON.parse(getSession('USER_LOGIN_INFO')).token:'',
		avatar:JSON.parse(getSession('USER_LOGIN_INFO')) ? 

};
export default state

store.js

import Vue from 'vue'
import Vuex from 'vuex'
import  state from './state/state'
import  mutations from  './mutations/mutations'
import  actions from './actions/actions'
import  getters from './getters/getters'

Vue.use(Vuex);

export default new Vuex.Store({
  state,
  getters,
  mutations,
  actions
})

大致结构如下：