方式一：vuex的传参
步骤1：vuex的配置
新建文件夹为store，在store文件夹里新建index.js文件，它的配置如下：
//第一步 引入，并使用
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(vuex)
//第二步 创建
const config = {
//定义状态
state:{
isLogin: false,
tow: "第二种取值的方法---mapState",
three: "第三种取值的方法11111sssss---getters"
},
// 定义getters获取状态值
getters: {
//这个是getters获取数据的一个方法，其实我们亦可以不使用
three(state) {
return state.three
}
},
//修改数据
mutations: {
isLogin(state, paylog) {
state.isLogin = paylog
},
// phone(state, paylog) {
// state.phone = paylog
// }
},
actions: { //这是一部操作
},
modules: {
}
}
//第三步 导出
export default new Vuex.Store(config);
步骤2：在main.js中引入
import Vue from 'vue'
import App from './App.vue'
import router from '@/router/index'
//导入store文件
import store from '@/store/index'
Vue.config.productionTip = false
new Vue({
render: h => h(App),
router,
//注册store
store
}).$mount('#app')
步骤3：在需要的组件中获取参数
第一种获取值得方法： 通过this.$store.state.xxx 来取,
<p>结果是：{{isLogin}}</p>
//计算属性
computed: {
isLogin(){
return this.$store.state.isLogin
},
}
第二种获取值得方法：通过辅助函数mapState来获取
import {mapState} from 'vuex'
data() {
return {
addr: '广西'
};
},
computed: mapState({
// 取state里count的值
count: 'count',
// 取state里count的值,用countAlias变量接收
countAlias: 'count',
// 为了能够使用 `this` 获取局部状态，必须使用常规函数
fullName(state) {
return this.addr + state.firstName + state.lastName;
}
})
// 如果需要定义其它的计算属性,就按照下面的写法
computed: {
// 其他的计算属性
total() {
return 500
},
...mapState({
// 取state里count的值
count: 'count',
// 取state里count的值,用countAlias变量接收
countAlias: 'count',
// 为了能够使用 `this` 获取局部状态，必须使用常规函数
fullName(state) {
return this.addr + state.firstName + state.lastName;
}
})
}
第二种获取值得方法：通过getters和mapGetters来取
// 定义一个用来获取fullName的getter,这是在vuex中进行配置的
getters: {
fullName(state) {
return state.firstName + state.lastName;
}
},
// 通过mapGetters
import {mapGetters} from 'vuex';
computed: {
fullName() {
return this.$store.getters.fullName;
}
}
使用getters的好处是，当我们在vuex中的index.js的文件中定义好了getters的方法，我们可以在任意的组件中使用getters的方法，非常的方便。例如我们有一个组件a.vue，需要使用到getters的方法，我们直接在该组件的计算属性computed中使用即可：
computed: {
fullName() {
return this.$store.getters.fullName;
}
}
修改state中的状态
-
定义state和mutation
import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) export default new Vuex.Store({ state: { name: "没名字", count: 1 }, getters: { }, // 修改state里的值必须通过mutation来修改 mutations: { /** * 定义一个修改name的mutation * state是上面的定义的state * payload是新的数据 */ updateName(state, payload) { state.name = payload; } } })-
在需要的时候调用mutation进行修改state里的name状态
// 第一个参数是mutation的名字,第二参数是要修改成的数据 this.$store.commit('updateName','老胡');
vuex 本地持久化
当刷新页面,项目重新加载,vuex 会重置,所有状态回到初始状态,使用 vuex-persistedstate 可以避免这种情况
-
安装 vuex-persistedstate
npm i vuex-persistedstate -
在vuex中,添加plugins
import createPersistedState from 'vuex-persistedstate' plugins: [createPersistedState()],
-
modules的使用
就是为了分块管理，当我们的状态太多的时候，全写在vuex中不易于管理，我们需要在外面的文件写好后，然后再倒进来，就像我们的后端接口model一样，都是为了方便管理
//配置子模块的car.js的vuex
export default {
state: {
cartNum: 10
},
getters: {
},
mutations: {
updateCartNum(state, payload) {
state.cartNum = payload;
}
},
actions: {
}
}
//在vuex的index.js文件中的配置
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
import car from './modules/car.js'
exoprt default new Vuex.Store({
modules:{
car, //引入我们的子模块car的vuex
xxx
}
})
//在组件中获取值
<template>
<div>{{cartNum}}</div>
</template>
<script>
import { mapState } from "vuex";
export default {
computed: mapState({
cartNum(state) {
return state.cart.cartNum;
}
})
};
</script>
```
**action**
Action 类似于 mutation，都是用来修改vuex的状态, 不同在于：
- Action 提交的是 mutation，而不是直接变更状态。
- Action 可以包含任意异步操作。
```
//vuex中的配置
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
num: 10
},
mutations: {
updateNum(state, payload) {
state.num = payload;
}
},
actions: {
/**
* 修改num的action
* @param {*} ctx 可以拿到一个类似store的实例
* @param {*} payload 修改的数据
*/
updateNum(ctx, payload) {
setTimeout(() => {
ctx.commit('updateNum', payload);
}, 3000)
}
}
})
//在组件中使用
//派发action,在需要的地方,调用以下方法
this.$store.dispatch("updateNum", 500);
方式二：采用本地存储的方式地址传值
在组件a中的配置
<template>
<div @click="getAddress">
<!-- 采用的是事件代理，为每一个元素添加点击事件 -->
<van-index-bar :index-list="charC">
<van-cell :title="item" v-for="(item,index) in cityBanelData" :key="index" />
</van-index-bar>
</div>
</template>
<script>
export default {
data() {
return {
charC: [] //测边栏的字母
};
},
methods: {
getAddress(e) {
console.log(e.target.innerText);
// 采用本地存储的方式地址传值
localStorage.setItem("area", e.target.innerText);
this.$router.push("/movie/left");
}
},
props: ["cityBanelData"]
};
</script>
<style lang="less" scoped>
</style>
```
在组件b中的获取
```
created() {
this.areas = localStorage.getItem("area");
}
```
#### 方式三：路由传参
