Vuex使用方法
Vuex使用方法
一、Vuex简述 Vuex其实就是一个状态管理工具,所谓的状态,就是数据,通过这个工具进行管理某些数据。当多个组件都需要同一个数据时,可以将这个数据交给Vuex进行统一的管理,组件可以直接引用这个数据,避免了组件间繁琐的层层传递的情况。 二、Vuex核心 Vuex有五大核心,state,getter,mutation,action,module。state用来存放要被管理的数据,getter相当于computed计算属性,mutation中用来定义要修改state中数据的方法,action中用来定义异步的一些方法,module可以将多个store分成一个一个的模块。 三、Vuex使用 在vue项目中使用Vuex时,需要先安装Vuex插件,并且注册,一般情况下都会在,在src下新创建一个store文件夹,下边有一个index.vue,在这个文件中创建store容器实例.。 安装插件 npm install vuex --save 注册插件 import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) 创建vuex实例,在vuex上提供了一个Store()方法,用来创建实例,将其命名为store,意为仓库的意思。在Vuex.Store()中传一个配置对象,配置对象中包括上述的五大核心,如果用不到,也可以不做配置。 const store = new Vuex.Store({ state: {num: 2}, // 存放数据 getters: {}, // 计算属性 mutations: {}, // 修改state中数据的一些方法 actions: {}, // 异步方法 modules: {} // store模块 }) export default store 在入口文件main.js中引入store。 // main.js import Vue from 'vue' import App from './App' import store from './store/index.vue' // 简写 import store from './store' Vue.config.productionTip = false new Vue({ el: '#app', store: store, // es6 简写 直接写 store 属性名和变量名相同 render: h => h(App) }) 在页面中如何使用store中的数据?在使用vuex中的数据之前,先使用import导入写好的store。组件中在插值表达式中使用$store.state.num获取store中num的数据。 {{ $store.state.num }} 四、mapState,mapMutations,mapGetters,mapActions映射 // 先从vuex中结解构出四个方法 import {mapState, mapMutations, mapGetters, mapActions} from 'vuex' // 在computed计算属性中映射state数据和getters计算属性 computed: { ...mapState('模块名', ['name', 'age']) ...mapGetters('模块名', ['getName']) } // 在methods方法中映射mutations和actions方法 methods: { ...mapMutations('模块名', ['方法名1','方法名2']) ...mapActions('模块名', ['方法名1','方法名2']) } 这些数据和方法都可以通过this来调用和获取 以上就是vuex大致的使用方法 作者:辰漪 链接:https://www.jianshu.com/p/dcbaceb4464e
 2022-12-26
Vuex搜索小案例
Vuex搜索小案例
什么情况下应该使用 Vuex? Vuex 可以帮助我们管理共享状态,并附带了更多的概念和框架。这需要对短期和长期效益进行权衡。 如果不打算开发大型单页应用,应用够简单,最好不要使用 Vuex。一个简单的 store 模式就足够了。但是,如果需要构建一个中大型单页应用,就要考虑如何更好地在组件外部管理状态,Vuex 是不错的选择。 源代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="js/vue.js"></script> <script src="js/vuex.js"></script> </head> <body> <div id="app"> <h3>列表查询</h3> <input v-model="id" type="text"> <input v-model="name" type="text"> <input type="submit" @click="search" value="搜索id"> <input type="submit" @click="searchName" value="搜索name"> <hr> <p> 搜索结果{{this.$store.getters.search}} 搜索结果{{this.$store.getters.searchName}} </p> <ul> <li v-for="item in this.$store.state.todos">{{item}}</li> </ul> <!-- {{this.$store.state.id}}--> </div> </body> <script> //创建一个store对象 var store = new Vuex.Store({ getters:{ search:state=>{ return state.todos.filter(todo=>todo.id==state.id) }, searchName:state=>{ return state.todos.filter(todo=>todo.text.indexOf(state.name)!=-1) } }, state:{ todos:[ {id:1,text:'张三'}, {id:2,text:'李四'}, {id:3,text:'王五'}, {id:4,text:'赵六'}, {id:5,text:'刘星宇'}, ], id:0, name:"" }, //修改store对象中的数据 mutations:{ search(state,id){ state.id = id;//将store中的id修改 }, searchName(state,name){ state.name = name;//将store中的id修改 } } }) new Vue({ el:"#app", data:{ id:'', name: "" }, store, methods:{ search:function () { //调用mutations中的search方法 this.$store.commit('search',this.id); }, searchName:function () { //调用mutations中的search方法 this.$store.commit('searchName',this.name); } } }) </script> </html>
 2022-4-26
     跳转到第 页,共 1 页

Theme By Brief 鄂ICP备19010459号

站长统计 sitemap

首页

分类

友链

登录