一. 引入vuex
目錄：
image.png
index.js
//index.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state:{
},
actions:{
},
mutations:{
},
modules:{
}
})
main.js 引入 store
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
Vue.config.productionTip = false
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
二.vuex 三種取值方式
定義值
//index.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const add = {
state:{
userName: 'jack'
},
actions:{},
mutations:{}
}
export default new Vuex.Store({
state:{
appName: 'admin'
},
actions:{
},
mutations:{
},
modules:{
add
}
})
1. 使用$store
<template>
<div>
<p>appName: {{ this.$store.state.appName }}</p>
<p>appName: {{ appName }}</p>
<p>userName: {{userName}}</p>
</div>
</template>
<script>
export default{
computed:{
appName(){
return this.$store.state.appName
},
userName(){
//取模塊里面的值
return this.$store.state.add.userName
}
}
}
</script>
2. 使用vuex 提供的mapState 函數(shù)獲取
如果需要去模塊中的值溶推，第一個參數(shù)傳入模塊的名稱琴儿，或者是直接通過 “ . ” 操作符加模塊名稱缸废。
improt { mapState } from 'vuex'
<script>
export default{
computed:{
//數(shù)組的取值方式
// ...mapState([
// 'appName'
// ])
//數(shù)組的 獲取模塊中的值
// ...mapState('add',[
// 'appName'
// ])
// 對象的取值方式
...mapState({
appName: state => state.appName,
userName: state => state.add.userName
})
}
}
</script>
3.通過命名空間 模塊取值
首先需要在模塊中開啟命名空間
//分模塊 user.js
const state = {
//
urlName: 'www.baidu.com'
}
const actions = {
//
}
const mutations = {
//
}
export default {
namespaced: true, //開啟命名空間
state,
actions,
mutations
}
// index.js ,引入user.js 模塊
import Vue from 'vue'
import Vuex from 'vuex'
import state from '@/store/state'
import actions from '@/store/actions'
import mutations from '@/store/mutations'
import user from '@/store/module/user'
Vue.use(Vuex)
export default new Vuex.Store({
state,
mutations,
actions,
modules: {
user
}
})
模塊的取之又分兩種。
- 使用 createNamespacedHelpers 函數(shù)彪置。
//index.vue
<template>
<div >
<p>
urlName: {{urlName}}
</p>
</div>
</template>
<script>
import { createNamespacedHelpers } from 'vuex';
const { mapState } = createNamespacedHelpers('user'); //模塊的名稱
export default {
name: 'home',
data(){
return {};
},
computed:{
...mapState({
urlName: state => state.urlName
})
},
methods:{
}
}
</script>
- 在使用mapState 取之時 第一個參數(shù)傳入模塊的名稱。
//index.vue
<template>
<div >
<p>
urlName: {{urlName}}
</p>
</div>
</template>
<script>
import { mapState } from 'vuex';
export default {
name: 'home',
data(){
return {};
},
computed:{
...mapState('user',{
urlName: state => state.urlName
})
},
methods:{
}
}
</script>
三 纯衍、vuex 的 getter 部分
vuex 的 getter 部分相當(dāng)于組件的計算屬性任岸。當(dāng)他們的值改變的時候再榄，使用了他們的組件中的視圖和一些狀態(tài)都會發(fā)生變化
定義：
//getters.js
const getters = {
appNameAndVersion: (state) =>{
// state 是同級目錄的state 對象
return `${state.appName}V2.0`
}
}
export default getters;
//index.js
import Vue from 'vue'
import Vuex from 'vuex'
import state from '@/store/state'
import actions from '@/store/actions'
import mutations from '@/store/mutations'
import user from '@/store/module/user'
import getters from '@/store/getters';
Vue.use(Vuex)
export default new Vuex.Store({
state,
getters,
mutations,
actions,
modules: {
user
},
})
user.js
const state = {
//
urlName: 'www.baidu.com'
}
const getters = {
urlNameApi: (state) =>{
return `${state.urlName}/api`;
}
}
const actions = {
//
}
const mutations = {
//
}
export default {
namespaced: true,
state,
actions,
getters,
mutations
}
使用：
1.使用 $state
<template>
<div >
<p>
appName: {{ this.$store.state.appName }}
appNameAndVersion: {{ appNameAndVersion }}
</p>
</div>
</template>
<script>
import { mapState } from 'vuex';
export default {
name: 'home',
data(){
return {};
},
computed:{
...mapState({
appName: state => state.appName
}),
appNameAndVersion (){
return this.$store.getters.appNameAndVersion
},
urlNameApi(){
//獲取模塊中的值
return this.$store.getters['user/urlNameApi']
}
},
methods:{
}
}
</script>
2.使用vuex 提供的 mapGetters 函數(shù)
<script>
import { mapState,mapGetters } from 'vuex';
export default {
name: 'home',
data(){
return {};
},
computed:{
...mapState({
appName: state => state.appName
}),
mapGetters([
'appNameAndVersion'
]);
// 獲得模塊中的值 注意需要開啟命名空間
// mapGetters('user',[
// 'urlNameApi'
// ]);
},
methods:{
}
}
</script>
如果不使用命名空間的話 可以直接獲取
將 user.js 中的 namespaced 命名空間關(guān)掉
const state = {
//
urlName: 'www.baidu.com'
}
const getters = {
urlNameApi: (state) =>{
return `${state.urlName}/api`;
}
}
const actions = {
//
}
const mutations = {
//
}
export default {
// namespaced: true,
state,
actions,
getters,
mutations
}
<script>
import { mapState,mapGetters } from 'vuex';
export default {
name: 'home',
data(){
return {};
},
computed:{
...mapState({
appName: state => state.appName
}),
//可以直接取模塊中的。
mapGetters([
'appNameAndVersion',
'urlNameApi'
]);
methods:{
}
}
</script>
