快速使用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部分詳解