vuex标准化看这篇文章就够了~

原创

朦胧淡月 2022-09-01 17:47:02 博主文章分类：vuex ©著作权

©著作权归作者所有：来自51CTO博客作者朦胧淡月的原创作品，请联系作者获取转载授权，否则将追究法律责任

vuex标准化看这篇文章就够了~_微信

1.新建一个store文件夹，新建index.js文件，内容如下：

import Vue from 'vue'
import Vuex from 'vuex'
import state from './state'
import mutations from './mutations'
import * as getters from './getters'
import * as actions from './actions'

Vue.use(Vuex)
export default new Vuex.Store({ 
    state,
    mutations,
    actions,
    getters
});

2.新建state.js文件，内容如下：

const  state={
    sysname:{
        name:"张三",
        age:"210",
    },
    /异步请求的数据
    datatest:{
        
    }
}
export  default state

3.新建mutation-type.js,内容如下：

export const SYSNAME = 'SYSNAME';

export const DATATEST = 'DATATEST';

4.新建mutation.js，内容如下：

import * as type from './mutation-types'
const mutations = {
    [type.SYSNAME](state, value) {
    　　　　state.sysname= value;
    },

    //异步
    [type.DATATEST](state, value) {
        state.datatest= value;
    },
};
    
    
export default mutations;

5.新建getters.js，内容如下：
vuex 中的getters 想当于vue中的compute
getters是vuex 中的计算属性，计算属性写起来是方法，但它是个属性

export const sysname = state => state.sysname;

export const datatest = state => state.datatest;

6.新建actions.js，内容如下：

import * as type from './mutation-types'
import { actionTest } from '../https/api'
// import state from './state'  
// 可以通过  state.userInfo.orgId,获取state中的值

export const getTest = function({ commit }) {
  actionTest({
        // key ：value，
        // key ：value 你携带的参数
  }).then((res) => {
    if(res.success) {
            console.log(res.data );
                        //要去触发mutation，只能够通过commit；
      commit(type.DATATEST, res.data)
    }
  })
}

7.在入口文件main.js中使用:

import store from './store';
window.vm = new Vue({
    el:'#app',
    store,
    router,
    i18n,
    render: c => c(App)
})

8在页面使用

<div> {{sysname}}</div>

<div  @click="change" class="awit-check">
   改变值
</div>

<div  @click="action" class="awit-check">
  异步
</div>
<div   class="awit-check">
  异步的数据{{ datatest  }}
</div>

import { mapMutations, mapGetters }  from "vuex"
//通过mapGetters 辅助函数来取值


methods:{
  change(){
            console.log( this.sysname)
            let sysnameInt= this.sysname;//将不需要修改的数据先取出来，
            this.changesysname({
                name:'数据改为123',  //key是state中的,value是你要保存的值
                age:sysnameInt.age, //取出来后，然后塞进去；
            })
   },
   //发送异步请求，
   action(){
         //要去触发action，只能够通过dispacth去触发的哈~；
         this.$store.dispatch('getTest');//触发action中的方法
   }

      //mapMutations 写在methods的最后面，他是用来修改值的哈~；
      //调用changesysname 方法去修改值； 
      //SYSNAME必须跟mutation.js 中的 [type.SYSNAME]这里的（SYSNAME）的保持一致；
       ...mapMutations({
              changesysname:'SYSNAME',
        })
},

 computed:{
         //mapGetters来取值，通过this.sysname就可以取值了
          ...mapGetters(['sysname','datatest'])  
},