vuex简单描述、用法

vuex的简单描述

vuex： Vue.js 应用程序开发的状态管理模式
store： 单一状态树
getter： 可以认为是 store 的计算属性
mutation：
更改 Vuex 的 store 中的状态的唯一方法是提交 mutation，同步
Action：
提交的是 mutation，而不是直接变更状态。
Action 可以包含任意异步操作
Module：
每个模块拥有自己的 state、mutation、action、getter

vuex的引用及方法定义

1、main.js中，将store注入根节点，每一个组件中就可以使用了

import store from './store'

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

2、store文件夹中新建index.js内容如下

import Vue from 'vue'

// 引入vuex
import Vuex from 'vuex'

// 注册vuex
Vue.use(Vuex)

// 定义类型
const types = {
  SET_AUTHENTICATED:"SET_AUTHENTICATED",
  SET_USER:"SET_USER"
}

// 定义数据状态
const state = {
  isAuthenticated:false,
  user:{}
}

// 获取数据
const getters = {
  isAuthenticated:state => state.isAuthenticated,
  user: state => state.user
}

// 修改状态方法定义
const mutations = {
  // 设置是否授权，
  [types.SET_AUTHENTICATED](state,isAuthenticated){
    if(isAuthenticated) state.isAuthenticated = isAuthenticated;
    else state.isAuthenticated = false;
  },
// 设置user
  [types.SET_USER](state, user){
    if(user) state.user = user;
    else state.user = {};
  }
}

// 异步操作用于调用mutation
const actions = {
  setAuthenticated: ({commit}, isAuthenticated) => {
    commit(types.SET_AUTHENTICATED, isAuthenticated)
  },
  setUser: ({commit},user) => {
    commit(types.SET_USER,user)
  },
  // 退出登录--
  clearCurrentState:({commit}) => {
    commit(types.SET_AUTHENTICATED, false)
    commit(types.SET_USER,null)
  }
}

// 导出对象
export default new Vuex.Store({
  state,
  getters,
  mutations,
  actions
})

使用：

获取数据：
获取之后可直接使用html中可以直接用{{user}}

export default {
    name:"head-nav",
    // 获取vuex中user数据
    computed: {
        user(){
            return this.$store.getters.user
        }
    },
}

设置数据:

//设置vuex store
this.$store.dispatch("clearCurrentState");