【Vuex】

Vuex

vuex是做什么的?

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用 集中式存储管理 应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension，状态快照导入导出等高级调试功能。

状态管理到底是什么？

状态管理模式、集中式存储管理这些名词听起来就非常高大上，让人捉摸不透。其实，你可以简单的将其看成把需要多个组件共享的变量全部存储在一个对象里面。然后，将这个对象放在顶层的Vue实例中，让其他组件可以使用。那么，多个组件是不是就可以共享这个对象中的所有变量属性

管理什么状态呢?

但是，有什么状态时需要我们在多个组件间共享的呢？

如果你做过大型开放，你一定遇到过多个状态，在多个界面间的共享问题。比如用户的登录状态、用户名称、头像、地理位置信息等等。比如商品的收藏、购物车中的物品等等。这些状态信息，我们都可以放在统一的地方，对它进行保存和管理，而且它们还是响应式的

Vuex的流程图

同步vuex提交的流程图

异步 vuex 修改数据的流程

Vuex基本使用

安装使用Vuex

npm install vuex --save # 运行时依赖

同步 vuex 修改数据

​ Vuex基本详情

​ 1) 先创建一个store文件夹，并创建一个index.js：

import Vue from 'vue'
import Vuex from 'vuex'

// store可以理解成一个存放状态(state) 和 修改状态的仓库

/* 导入vuex 把vuex当作一个插件安装到Vue中  */
Vue.use(Vuex)

/* 导出了 Vuex.Store构造函数的实例化对象 */
export default new Vuex.Store({
  /* 状态管理库 */
  state: {
      counter: 1000
  },
  /* 同步修改state中的状态 */
  mutations: {
       increment(state){
            state.counter++
        },
        decrement(state){
            state.counter--
        }
  },
  /* 异步的去通知mutations去修改state中的状态 */
  actions: {},
  // 计算属性
   getters:{},
   /* 状态变多 就需要使用模块来分开来使用 更方便 */
   modules: {}
})

2）在main.js中，导入store对象，并且放在new Vue中,这样，在其他Vue组件中，我们就可以通过this.$store的方式，获取到这个store对象了

import Vue from 'vue'
import App from './App.vue'
import router from "./router";
import store  from "./store";

Vue.config.productionTip = false

//为什么需要挂载  store  Vue会修改原型,为所有组件添加一个全局的对象

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

3）使用Vuex的count

<template>
    <div>
        直接获取:<p>当前计数{{$store.state.counter}}</p>
        js代码改变获取:<p>{{counter}}</p>
        <button @click="increment">+1</button>
        <button @click="decrement">-1</button>
    </div>
</template>

<script>
    export default {
        name: "HelloWorld",
       computed:{
            counter(){
                return this.$store.state.counter
            }
       },
        methods:{
            increment(){
                this.$store.commit('increment')
            },
            decrement(){
                this.$store.commit('decrement')
            }
        }
    }
</script>

<style scoped>

</style>

注意事项：

我们通过提交mutation的方式，而非直接改变store.state.count。这是因为Vuex可以更明确的追踪状态的变化，所以不要直接改变store.state.count的值。

异步 vuex 修改数据

在app.vue父组件中

<template>
  <div id="app">
    <ul>
      <li v-for="(item, index) in $store.state.arrList" :key="index">
        标题:{{ item.title }} 描述:{{ item.dec }} 学历:{{ item.benke }}
        </li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  created() {
    // 模拟异步获取数据
    setTimeout(() => {
      axios({
        method: 'get',
        url: 'a.json'
      }).then(
        res => {
          console.log(res.data)
          使用dispatch像store文件index中派发到actions中
          this.$store.dispatch('getaxiosNum', res.data)
          console.log(this.$store)
        },
        () => {
          console.log('出现错误提示弹出框')
        }
      )
    }, 1000)
    
  },
}
</script>

在store文件夹index.js中

import Vue from 'vue'
import Vuex from 'vuex'

// store可以理解成一个存放状态(state) 和 修改状态的仓库

/* 导入vuex 把vuex当作一个插件安装到Vue中  */
Vue.use(Vuex)

/* 导出了 Vuex.Store构造函数的实例化对象 */
export default new Vuex.Store({
  /* 状态管理库 */
  state: {
    arrList:[],
  },
  /* 同步修改state中的状态 */
  mutations: {
    /* mutations的方法统一用大写
    方便区分actions的方法 */
    ADDXIOS:function(state,numaxios) {
      state.arrList=numaxios
      console.log(state.arrList);
    },
    
  },
  /* 异步的去通知mutations去修改state中的状态 */
  actions: {
    getaxiosNum({commit},numaxios){
      commit('ADDXIOS',numaxios)
    },
  },


})

vuex里面的计算属性