Vuex

Vuex简介

Vuex中文文档

Vuex 是专门为 Vue.js 设计的状态管理库，以利用 Vue.js 的细粒度数据响应机制来进行高效的状态更新

vue 状态 管理模式:

• 这个状态自管理应用包含以下几个部分：
  • state，驱动应用的数据源；
  • view，以声明方式将 state 映射到视图；
  • actions，响应在 view 上的用户输入导致的状态变化。

Vuex 用法

1. 使用 vue-cli 脚手架 创建vue 项目:

命令: vue create VuexDemo

• 选项中勾选 Vuex

• 完成后 项目主目录的 src 文件夹下 会多一个 store.js 的 文件

  import Vue from 'vue'
  import Vuex from 'vuex'
  
  Vue.use(Vuex)  // vuex 注册到全局
  
  export default new Vuex.Store({
    state: {
  	// vue 项目 的 全局数据
        count: 0,
    },
    mutations: { // 直接修改的
  	// Vuex 中数据的唯一方法就是 (commit) 提交 mutation    
        add(state, num){ // 定义方法 修改时提交
        state.count += num  // 让count 自增 1
    	  }
  
    },
    actions: {  // 需要交互修改的
  	// 需要跟 后端的 api 进行交互的 axios 操作 (异步操作)
        this.$store.commit('add')  提交 //
    }
  })
  

  ​

• 将Vuex 的实例注册到 vue的 根实例中:

  import Vue from 'vue'
  import App from './App.vue'
  import router from './router'
  import store from './store'  //  导入vuex 仓库
  
  Vue.config.productionTip = false
  
  new Vue({
    router,
    store,  // 注册 vuex 仓库
    render: h => h(App)
  }).$mount('#app')
  

• 组件中调用 仓库中的数据 :

  • **使用计算属性获取 **

  <template>
  <div>
  <p>{{ count }}</p>    
  </div>
  </template>
  
  <script>
  export default {
      name:'Count'
      computed:{  // 计算属性  
         	count(){
  			return this.$store.state.count; 
      //  调用全局的 仓库  获取仓库中的 state 中的 count 变量
          }
      }
  }
  </script>
  

  如果需要调用的 变量过多 使用 mapStart 辅助函数

  官方文档

  导入: import {mapState} from 'vuex'

  <script>
      import {mapState} from 'vuex'
      export default {
          name: "Count",
          // 使用辅助函数
          computed: mapState({
              // count: start => start.count,
              count: 'count',  // 传递字符串  'count'  等同于  start => start.count 
              
              // 为了能够使用 `this` 获取局部状态，必须使用常规函数
              countPlusLocalState (state) {
                	return state.count + this.localCount
              }
          }),
      }
  </script>
  
  
  

• 修改仓库中的 内容:

  通过事件 触发方法 给仓库中提交 仓库中 mutations 中定义的 方法 对 内容进行修改

  
  <script>
      export default {
          name: "Count",
          //单独使用计算属性
          computed: {
               count() {
                   return this.$store.state.count;
               }
           },
  
          methods: {
              aaa(res) {
                  this.res = res;
                  this.$store.commit('add', 10)  // 第二个参数用来传值
              }
          }
      }
  </script>