vue全家桶項目搭建之四——vue 中配置vuex以及vuex的使用方法

目錄

一、安裝vuex

二、將vuex配置到vue中

1. 在src目錄下創建store文件夾

2.index.js對vuex進行配置導出

3.在src文件夾下的入口js文件main.js中引入輸出的store

三、vuex的使用方法

1.如何在頁面是和你說過調用store裏面的方法

2.如何在頁面獲取store裏面的參數

---

一、安裝vuex

npm install vuex --save

二、將vuex配置到vue中

1. 在src目錄下創建store文件夾

在store文件夾下面創建module文件夾用於存放不同功能的store

目錄如下

2.index.js對vuex進行配置導出

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
    },
});

module裏面的配置：

 
 const login = {
     state :{
        testData:'我是從store中獲取的數據'
     },
     getters:{
        testData:(state) =>state.testData 
     },
     actions:{
        getOrderQueryList(){
            console.log('我調用到了store裏面的方法')
        }
     },
     mutations:{},
 }
 export default login

Action 提交的是 mutation，而不是直接變更狀態。

Action 可以包含任意異步操作。

mutation用於改變state狀態

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

3.在src文件夾下的入口js文件main.js中引入輸出的store

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.所需參數名稱

vue全家桶項目搭建之五——vue 中配置路由以及路由的跳轉方法以及參數的傳遞和接收

 

如果有更精闢的見解歡迎評論留言探討，一起探討，一起進步！若回覆不及時可聯繫：