快速使用vuex

NO IMAGE

首先

搭建vue環境,安裝vuex。

入口

新建文件store.js,註冊vuex

import Vue from 'vue'
import Vuex from 'vuex'
import User from './storage/user'

Vue.use(Vuex);

export default new Vuex.Store(User)

user.js文件就是存放的數據和操作方法。如下:

快速使用vuex

在vue入口文件index.js引入store.js。如下:

import store from './store'


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

講一下具體用法:

State

**
用一個對象包裹數據(你需要存放的數據)。user.js 為例,如下

state: {
        user_name: 'zhouyicc',
        age: 0,
        todolist: [
            {
                id: '0001',
                data: '測試一把',
                down: true
            },
            {
                id: '0002',
                data: '測試二把',
                down: false
            }
        ]
    },

如果你想在.vue文件中拿到這些數據,(比如我要拿到user_name和age變量)如下:

import {mapState} from 'vuex'

先引入mapState,然後在計算屬性computed中使用。

computed: {
        ...mapState({
        	username: state => state.user_name,
        	age: state => state.age
    	})
},

這樣在頁面中直接使用<p>{{username}},{{age}}</p>

Getter

從 state 中派生出一些狀態。
舉個例子:比如我要拿到上面state中的==todolist==數組中down為true的數據。

getters: {
        downUser: state => {
            return state.todolist.filter(item => item.down)
        }
    }

想要拿數據和展示如state一樣,引入==mapGetters==。

computed: {
            ...mapGetters({
                downuser:'downUser'
            })
        },
<p>{{downuser.data}}</p>

Mutation和Action

用action去觸發mutation,mutation去修改屬性。
比如:我要修改上面state中的age屬性,我點一次變更一下。

mutations: {
        changeAge(state, data) {
            state.age = data
        }
    },
actions: {
        changeAge({commit}, data) {
            commit('changeAge', data)
        }
    }

然後在頁面中引入==mapActions==,去methods中註冊使用,這樣就可以直接用this.changeAge調用actions中的changeAge方法。當然你也可以直接用==mapMutations==去調用changeAge,但是官方推薦我們使用actions去觸發。官方地址

methods: {
			getAge() {
                this.changeAge(parseInt(Math.random() * 100))
            },
            ...mapActions({
                changeAge:'changeAge'
            })
        }

getAge就是按鈕觸發的方法。每次隨機數取整

Module

簡單而言就是模塊切割,一般用於大型複雜數據交互。
比如說我想在剛才的基礎上新建一個product.js文件,和user.js結構一樣,那麼在store.js文件中你需要這麼引入。

import Product from './storage/product'
import User from './storage/user'
Vue.use(Vuex);

export default new Vuex.Store({
    modules: {
        user:User,
        product:Product
    }
})

在user.js和product.js的屬性中添加namespaced: true,使其成為帶命名空間的模塊,它的所有 getter、action 及 mutation 都會自動根據模塊註冊的路徑調整命名,我理解的是不會造成命名衝突問題。
還是以user.js為例,使用如下:

...mapState({
                username: state => state.user.user_name,
                age: state => state.user.age
            })

上面的user就是剛才modules中的自定義的user屬性。

mapActions和mapGetters的使用如下:

...mapGetters({
                downuser:'user/downUser'
            })
...mapActions({
                changeAge:'user/changeAge'
            })

用法就是屬性值的前面加上user。

其它詳見vuex官網

相關文章

關於我對於寫博客寫文章的理解

藉助系統自帶圖片裁剪集成圖片選擇以及7.0適配

面試題整理—CSS部分

前端面試題—vue部分詳解