Vuex

• Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。常在中大型网页应用中使用。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension (opens new window)，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。

这个状态自管理应用包含以下几个部分：

1. state，驱动应用的数据源；
2. view，以声明方式将 state 映射到视图；
3. actions，响应在 view 上的用户输入导致的状态变化。

• 以下是一个表示“单向数据流”理念的简单示意： 

• vuex在全局中的功能 

项目中的使用步骤

创建store文件夹

原理：在入口(index.js)中定义需要管理的多个状态，在页面中通过dispatch(mapaction)触发相应的action,在mutations.js中赋值，组件渲染直接取值

index.js用来管理入口

// 管理入口
import Vue from 'vue';
import Vuex from 'vuex';
import actions from './actions'     //actions、mutations变量名不能篡改
import mutations from './mutations'

Vue.use(Vuex);

const state = {
    username:'',    //用户名
    cartcount: 0    //购物车商品数量
}

export default new Vuex.Store({   //new一个新的对象，该对象包含下列三个变量
    state,
    actions,
    mutations
})

在登录页面login.vue的login方法中触发action

this.$store.dispatch('saveUserName',res.username)//保留用户名用来进行后续网页显示

action.js提供可触发的action

通过commit触发两个名为saveUserName，saveCartCount的matations，同时把参数username、cartcount存进去

//商城Vuex-action
export default{
    saveUserName(context,username){
        context.commit('saveUserName',username)
    },
    saveCartCount(context,cartcount){
        context.commit('saveCartCount',cartcount)
    }
}

在 matations.js里赋完值后为了避免刷新丢失数据，要在App.vue中重新拉取一次数据即：

• App.vue中的代码

getUser() {     //获取用户信息
        this.axios.get('/user').then((res={}) => {     //根据接口文档决定用get还是post
          //to-do 保存到vuex中
          this.$store.dispatch('saveUserName',res.username)
        })
      },

matations.js 用来赋值

//商城Vuex-mutation
export default{
    saveUserName(state,username){
        state.username = username
    },
    saveCartCount(state,cartcount){
        state.cartcount = cartcount
    }
}

• NavHeader.vue组件中单纯渲染

// computed解决变量获取延迟问题，即把数据获取写在computed里。
    //等价于：username(){this.$store.state.username;},
    //cartCount(){this.$store.state.cartcount}
    computed: {
      ...mapState(['username', 'cartcount'])//简写方式获取数据
    },