什么是vuex？

vuex是一个专门为vue.js应用开发获取到状态管理模式，vuex存放的状态是响应式的,更改状态的唯一途径是显示提交(commit)触发mutation更改state.

vuex的原理是什么？

每一个 Vuex 应用的核心就是 store（仓库）。“store” 基本上就是一个容器，它包含着你的应用中大部分的状态 ( state )。

Vuex为Vue Components建立起了一个完整的生态圈，包括开发中的API调用一环。

• Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。
• 改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样可以方便地跟踪每一个状态的变化。

vuex的安装

进入项目，在命令行中输入安装指令，回车

npm install vuex --save

然后配置 vuex，使其工作起来：在src路径下创建store文件夹，然后创建index.js文件，文件内容如下

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
const store = new Vuex.Store({ state: 
{
    // 定义一个name，以供全局使用
    name: '张三',
    // 定义一个number，以供全局使用
    number: 0, 
    // 定义一个list，以供全局使用 
    list: [
        { id: 1, name: '111' }, 
        { id: 2, name: '222' }, 
        { id: 3, name: '333' }, 
    ], 
    },
  });
    
    export default store;

修改main.js：

import Vue from "vue";
import App from "./App";
import router from "./router";
import store from "./store";
// 引入我们前面导出的store对象
Vue.config.productionTip = false;
new Vue({
  el: "#app",
  router,
  store,
  // 把store对象添加到vue实例上
  components: { App },
  template: "<App/>",
});

最后修改App.vue：

<template>
    <div></div> 
</template>
<script> 
export default {
    mounted() { 
    // 使用this.$store.state.XXX可以直接访问到仓库中的状态 
    console.log(this.$store.state.name);
    }, 
};
</script>

此时，启动项目npm run dev，即可在控制台输出刚才我们定义在store中的name的值。

如何在组件中使用Vuex的mapState

import {mapState} from 'vuex'
export default{
    computed:{
        ...mapState("use", ["userInfo"])
    }
}

如何在组件中使用Vuex的mapActions

import { mapActions } from 'vuex'
methods:{
   ...mapActions("use", ["getuseInfoAsync"]),
}

最后感谢观看到此的来客，若有不足的地方还希望多多指点。