一. 引入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 函数获取
如果需要去模块中的值，第一个参数传入模块的名称，或者是直接通过 “ . ” 操作符加模块名称。
improt { mapState } from 'vuex'
<script>
export default{
computed:{
//数组的取值方式
// ...mapState([
// 'appName'
// ])
//数组的 获取模块中的值
// ...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 函数。
//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 取之时 第一个参数传入模块的名称。
//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 部分相当于组件的计算属性。当他们的值改变的时候，使用了他们的组件中的视图和一些状态都会发生变化
定义：
//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 函数
<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 命名空间关掉
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>
