网络编程
位置：首页>> 网络编程>> JavaScript>> 浅谈vuex的基本用法和mapaction传值问题

浅谈vuex的基本用法和mapaction传值问题

作者：请不要让我脱发　　发布时间：2024-06-05 09:18:21　

标签：vuex,mapaction,传值

vuex的理论知识就不多提了，官网上已经有明确的讲解。

用一个简单的例子来描述一下基本的用法:

第一步：npm install vuex –save-dev

第二步：在目录中创建store目录配置管理状态


//store/index.js
/**
* Created by zhaohuan on 2017/7/13.
*/
import Vue from 'vue'
import Vuex from 'vuex';

Vue.use(Vuex);

const store = new Vuex.Store({
state: {
 msg: '原始数据'
},
actions: {
 fun: function ({commit},date) {
  commit('saveAdminInfo', {list: date});
 },
},
mutations: {
 saveAdminInfo(state, adminInfo){
  state.msg = adminInfo.list;
 }
}
});

export default store;

第三步：在main.js中引入store


new Vue({

el: '#app',
router,
store,
template: '<App/>',
components: { App }
});

第四部：编写路由页面


//test1.vue
<template>
<div>
msg:{{msg}}

<input type="text" v-model="checkedNames" style="border: 1px solid red">
 <button @click="fun">提交</button>
</div>

</template>

<script>
import {mapState,mapActions} from 'vuex';
export default{
 data(){
   return{
    checkedNames:''
   }
 } ,
 computed: {...mapState(['msg'])},
 methods: {
//    ...mapActions(['fun'])；
//如果需要向actions里面传值就手动调用
fun(){
    this.$store.dispatch('fun',this.checkedNames);
  }
//...mapActions(['fun']）==   this.$store.dispatch('fun');
 }
}
</script>

test2.vue


<template>
<div>
 msg:{{msg}}
</div>
</template>

<script>
import {mapState} from 'vuex';
export default{
 computed: {...mapState(['msg'])}, //对应getters.技术中的msg
//  methods: {...mapActions(['fun'])}
}
</script>

修改之前：

test1

浅谈vuex的基本用法和mapaction传值问题

test2

浅谈vuex的基本用法和mapaction传值问题

来源：https://blog.csdn.net/yangyiboshigou/article/details/75062739

0
投稿

猜你喜欢

手机版 网络编程 asp之家 www.aspxhome.com