vuex的使用——从一个例子入手

从一个例子入手浅谈vuex的使用

定义

Vuex 是一个专为 Vue.js开发的前端状态管理模式。它采用集中式存储管理应用的所有组件的状态。

特点

1.store是vuex的核心，当 Vue 组件从 store 中读取状态时，若 store 中的状态发生变化，那么相应的组件也会高效更新。
2.不能直接改变store中的状态，改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。

1.安装vuex

npm install vuex --save

2.建一个data文件夹，里面建一个user_store.js文件，data下有一个modules文件夹，其中包含了各个模块的state，目录如下图。

3.在user_store.js文件中引入vue,vuex以及axios。各个模块的state也可引入其中

import Vue from 'vue'
import Vuex from 'vuex'
import axios from 'axios'
//引入模块的state文件
import wareHouseInfo from "./modules/wareHouseInfo"


Vue.use(Vuex)
//引入模块state之后需定义，如下
const store = new Vuex.Store({
  modules : {
    wareHouseInfo,
  }
})

4.准备工作已经完毕，现在我们可以在warehouseInfo.js文件中更新我们的内容啦，请看代码。

//首先声明一个state状态
const state={
  wareHouseInfoList:[{
    id:'0',
    shopNo: "1号仓库",
    type:'A',
    name: "王婷",
    phone: "18911112222",
    local: "西藏自治区拉萨市城关区扎西街道"
  },{
    id:'1',
    shopNo: "2号仓库",
    type:'B',
    local: "西藏自治区拉萨市城关区扎西街道"
  }]
}
//获取状态信息，在接下来的组件中会用到
const getters = {
  getInfoList:state =>{
    return  state.wareHouseInfoList
  },
}
//更新状态，往wareHouseInfoList这个数组中添加一个对象
const mutations = {
  add(state, warehouse) {
    warehouse.id = state.wareHouseInfoList.length +1+"";
    state.wareHouseInfoList.push(warehouse);
  },
};
//在actions中注册事件处理函数，当这个函数被触发时，将状态提交到 mutaions中处理
const actions = {
  addWarehouse(ctx, newhouse) {
    newhouse && ctx.commit('add',newhouse);
  },
};
//所有模块在此注册后方能使用
export default {
  namespaced: true,
  state,
  getters,
  mutations,
  actions
}

5.在warehouse.vue中

 <div v-for="item in getInfoList ":key="item.id" >
        <div >{{item.shopNo}}</div>
        <div >
          <span >联系人:</span>
          <span>{{item.name}}</span>
          <span> {{item.phone}}</span>
        </div>
        <div >{{item.local}}</div>
      </div>
//引入mapGetters
import {mapGetters} from 'vuex'

 computed : {
      ...mapGetters({
      //与vuex中的getter关联，获取到getInfoList中的数值，在上面{{}}中可直接获取进行使用
       getInfoList:[`wareHouseInfo/getInfoList`] 
    })
}
//与vuex中的action相关联，将新的仓库信息添加到state中
 methods:{
       handleSave() {
       this.$store.dispatch('wareHouseInfo/addWarehouse',this.warehouse)
              }
            })
          }

6.最后在main.js中声明一下

import store from './assets/data';

更为详细的介绍请参考vuex官方文档vuex文档