vuex--store的基本用法

使用vuex实现状态管理

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

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

一个store文件

声明一个store/index.js文件

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
    state: {
    //这里放全局参数
        userInfo:null,
        tokenInfo:null,
        locationInfo:null
    },
    mutations:{
        //修改state  
        //这里是set方法 通过this.$store.commit('SET_USER_INFO', data); 直接set数据
        SET_USER_INFO(state, data) {
            state.userInfo = data
        },
        SET_TOKEN_INFO(state, data) {
            state.tokenInfo = data
        },
        SET_LOCATION_INFO(state, data) {
            state.locationInfo = data
        },
    },
    actions: {
    	// 方法
    	// 这里是set方法 通过this.$store.dispatch('USER_ACTIONS', data); 直接set数据
        USER_ACTIONS: ({ commit},data)=>{
            commit('SET_USER_INFO',data)
        },
        TOKEN_ACTIONS: ({ commit }, data) => {
            commit('SET_TOKEN_INFO', data)
        },
        LOCATION_ACTIONS: ({ commit }, data) => {
            commit('SET_LOCATION_INFO', data)
        }
    },
    getters:{
    	//这里是get方法
        getUserInfo: state => state.userInfo,
        getTokenInfo: state => state.tokenInfo,
        getLocationInfo: state => state.locationInfo
    },
    modules: {
    	//这里是我自己理解的是为了给全局变量分组，所以需要写提前声明其他store文件，然后引入这里
    },
})
export default store

两种get方法和set方法：

    this.$store.dispatch('USER_ACTIONS', data);
    this.$store.getters.user.userInfo;

this.$store.commit('SET_USER_INFO', data);
this.$store.getters.getUserInfo

多个store文件

main.js

import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import $ from 'jquery'
import 'vant/lib/index.css'
import './assets/styles/index.scss'
import VueClipboard from 'vue-clipboard2'

Vue.config.productionTip = false;
Vue.prototype.jquery = $;
VueClipboard.config.autoSetContainer = true // add this line
Vue.use(VueClipboard)

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

store/index.js

import Vue from "vue";
import Vuex from "vuex";
import user from './models/user';
import getters from './getters'

Vue.use(Vuex);

export default new Vuex.Store({
  state: {},
  mutations: {},
  actions: {},
  modules: {
    user
  },
  getters
});

sotre/getters.js

const getters = {
  user: state => state.user,
  userId: state => state.user.userId,
}

export default getters;

sotre/models/user.js

const user={
  state:{
    userId:'',
    cordId:'',//企业id,
    userInfo:null,
    wechatInfo:null
  },
  mutations:{
    //修改state
    saveUserInfo(state,data){
      state.userInfo = data
    },
    saveWechatInfo(state, data) {
      state.wechatInfo = data
    },
    SET_USER_ID: (state, userId) => {
      state.userId = userId
    },
    SET_CORD_ID: (state, cordId) => {
      state.cordId = cordId
    },
  },
  actions:{
    UserInfo:({commit},data)=>{
      console.log(data);
      commit('saveUserInfo', data)
      commit('SET_USER_ID', data.userId)
      commit('SET_CORD_ID', data.cordId)
    },
    WechatInfo:({commit},data)=>{
      commit('saveWechatInfo', data)
    },


    // 获取用户信息
    // GetInfo({ commit, state }) {
    //   return new Promise((resolve, reject) => {
    //     getInfo().then(response => {
    //       const data = response.data
    //       commit('SET_USER_ID', data.userId)
    //       commit('SET_CORD_ID', data.cordId)
    //       resolve(response)
    //     }).catch(error => {
    //       reject(error)
    //     })
    //   })
    // },
    // FedLogOut({ commit }) {
    //   return new Promise(resolve => {
    //     commit('SET_TOKEN', '')
    //     removeToken()
    //     resolve()
    //   })
    // }


  }


}

export default user;

App.vue

存储

let data = {name:'mavis',userId:'7283023',avatar:'https://img.yzcdn.cn/vant/cat.jpeg'}
this.$store.dispatch('UserInfo',data)

获取

let info = this.$store.getters.user.userInfo;

//{name:'mavis',userId:'7283023',avatar:'https://img.yzcdn.cn/vant/cat.jpeg'}

store/models/order.js

import { get_feedback_list} from '@/api/index';

export default {
  state: {
    page_info:{
      current_page: 0,
      page_size: 2,
      total_page: 0,
      total_records: 0
    },
    listData:[],
    parmas:{}

  },
  getters: {

  },
  mutations: {
    savePageinfo(state,pageinfo){
      state.page_info = pageinfo
    },
    initData(state,list){
      state.listData=list
    },
    saveParmas(state,parmas){
      state.parmas = parmas
    }

  },
  actions: {
    getFeedbackList({ state,commit},data){
      return new Promise((resolve,reject)=>{
        get_feedback_list(data).then(res => {
          resolve(res)
        }).catch(err=>{
          reject(err)
        })
      })
    }
  }
}

打印的store结构数据