vue配置以及使用

index.js里面配置

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
 
import login from "./module/login_module"//引入登陆模块
 
export default new Vuex.Store({
    modules: {
       login//注册使用login模块
    },
});

module文件里面的设置

 const login = {
     state :{
        testData:'我是从store中获取的数据'
     },
     getters:{
        testData:(state) =>state.testData 
     },
     actions:{
        getOrderQueryList(){
            console.log('我调用到了store里面的方法')
        }
     },
     mutations:{},
 }
 export default login

1. Action 提交的是 mutation，而不是直接变更状态。

2. Action 可以包含任意异步操作。

3. mutation用于改变state状态

4. state存放数据状态

使用方式：

const login = {
    state: {
        testData: '我是从store中获取的数据', 
        num: 1,
    },
    getters: {
        testData: (state) => state.testData
    },
    actions: {
        getOrderQueryList({ commit, state, dispatch }, params) {
            setTimeout(() => {
                let num = state.num+1
                commit('changeNum',num)
            }, 3)
        }
    },
    mutations: {
        changeNum(state, value) {
            state.num = value
          },
    },
}
export default login

main.js中挂载

import Vue from 'vue'
import App from './App.vue'
import ElementUI from "element-ui"
import 'element-ui/lib/theme-chalk/index.css';
import store from './store'//重点看这～～
 
Vue.use(ElementUI, { size: 'small', zIndex: 3000 });
Vue.config.productionTip = false
 
new Vue({
  store,//看这～～
  render: h => h(App),
}).$mount('#app')

vuex的使用方法

1.如何在页面是和你说过调用store里面的方法

（1）用this.$store.dispatch('方法名')调用

 this.$store.dispatch('getOrderQueryList')

（2）用mapActions(['方法名'])导入方法再在页面上调用

 methods: {
    ...mapActions(['getOrderQueryList',]),
    this.getOrderQueryList()
 }

（3）在使用的页面import导入store，然后使用store.dispatch('方法名')调用

import store from '@/store'
 store.dispatch('getOrderQueryList')
 methods: {
    this.getOrderQueryList()
 }

2.如何在页面获取store里面的参数

（1）this.$store.getters

this.$store.getters.要获取的参数名称

（2）mapGetters

computed: {
    ...mapGetters(["testData"])
  },

（3）导入store,然后store.getters

import store from '@/store'
store.getters.所需参数名称

Pinia配置及使用(推荐)

下载

npm install pinia --save
//或 
yarn add pinia
复制代码

使用

// main.js
import { createPinia } from 'pinia'
app.use(createPinia())
复制代码

定义state 和 getters

//Public.js
import { defineStore } from 'pinia'
export const PublicStore = defineStore('Public', { // Public项目唯一id
    state: () => {
        return {
            userMsg: {},
        }
    },
    getters: {
        getUserMsg: (state) => {
            return state.userMsg
        },
    },
    // other options...
})
复制代码

访问state 和 getters 两者的使用非常相似

在Composition API中

import { PublicStore } from '@/store/Public'
const store = PublicStore()
console.log(store.getUserMsg.userName, store.userMsg.token) // 可以访问state 和 getters
const { getUserMsg, userMsg } = { ...PublicStore() } // 可以直接解构但是会失去响应式
console.log(getUserMsg.userName, userMsg.token)
复制代码

state直接解构会使其失去响应式，这时候可以用 pinia 的 storeToRefs

import { PublicStore } from '@/store/Public'
import { storeToRefs } from 'pinia'
const { getUserMsg, userMsg } = storeToRefs(PublicStore()) // 保持响应式使用storeToRefs
console.log(getUserMsg.value.userName, userMsg.value.token)
复制代码

在Option API中需要使用辅助函数 mapState

import { PublicStore } from '@/store/Public'
import { mapState } from 'pinia'
export default {
    name: 'Home',
    computed: {// 获取state和getters  使用的方法类似
        ...mapState(PublicStore, ['getUserMsg', 'userMsg']), // 直接获取state和getters
        ...mapState(PublicStore, {
            aliasUserMsg: 'userMsg', // 获取state 并重命名
            aliasGetUserMsg: 'getUserMsg',// 获取getters 并重命名
            userName: store => store.userMsg.userName + store.getUserMsg.token, // 使用函数访问 state 或者getters
            getTooken(store) { // 使用非箭头函数访问 可以在函数中使用 this
                return [store.getUserMsg, store.userMsg, this.getUserMsg]
            }
        }),
    }
};
复制代码

定义actions

// public.js
import { defineStore } from 'pinia'
import { Auth } from './auth' //使用其他的store
export const PublicStore = defineStore('Public', {
   // other options...
   actions: {
       setUserMsg(userMsg) {
           this.userMsg = userMsg
       },
       async setUserMsgToken(userMsg) { // 同步的action
           const authStore = Auth()
           let res = await authStore.setPower() // 使用其他store
           if (res) {
               userMsg.authList = authStore.power
               this.userMsg = userMsg
               return true
           } else {
               return false
           }
       }
   }
})
复制代码

// auth.js
import { defineStore } from 'pinia'
import api from '@/api'
export const Auth = defineStore('Auth', {
    state: () => {
        return {
            power: [],
        }
    },
   // other options...
    actions: {
        async setPower() {
            let res = await api.BaseApi.getPower() // 在store中使用xhr
            if (res.code === 200) {
                this.power = res.data
                return true
            }
        }
    }
})
复制代码

使用actions

在Composition API中

import { PublicStore } from '@/store/Public'
const store = PublicStore()
const update = async () => {
     // store.userMsg = {userName: '涵涵', token: '234523423423423',authList: []} // 不推荐直接接修改 建议通过 actions 去修改 state
    let power = await store.setUserMsgToken({ userName: '涵涵',token: '234523423423423',authList: [] })
    if (power) {
        // 修改成功
    } else {
        // 修改失败
    }
}
复制代码

在Option API中使用mapActions辅助函数

import { PublicStore } from '@/store/Public'
import {  mapActions } from 'pinia'
export default {
    name: 'Home',
    methods: {
        ...mapActions(PublicStore, ['setUserMsg']),
        ...mapActions(PublicStore, {
            setUserMsgToken: 'setUserMsgToken'
        }),
        async update() {
            // this.userMsg.userName = '涵行' // 不推荐直接接修改 建议通过 actions 去修改 state
            let power = await this.setUserMsgToken({userName: '憨憨',token: '54735634545',authList: [] })
            if (power) {
                // 修改成功
            } else {
                // 修改失败
            }
        },
    }
};
复制代码

重置数据 reset

//Composition API
import { PublicStore } from '@/store/Public' 
const store = PublicStore()
store.$reset()

// Option API
import { PublicStore } from '@/store/Public'
export default {
    methods: {
        reset() {
            const store = PublicStore() // 只在某个函数中使用
            store.$reset() // 重置state 为初始值
        }
    }
};

vuex和Pinia配置使用情况

vue配置以及使用