门户网站建设和管理情况,游戏制作公司开发,腾讯免费网站建设,wordpress 速度慢Vuex 1.简介 1.1简介 1.框框里面才是Vuex state#xff1a;状态数据action#xff1a;处理异步mutations#xff1a;处理同步#xff0c;视图可以同步进行渲染1.2项目创建 1.vue create 名称 2.运行后 3.下载vuex。采用的是基于vue2的版本。 npm install vuex3 --save 4.vu… Vuex 1.简介 1.1简介 1.框框里面才是Vuex state状态数据action处理异步mutations处理同步视图可以同步进行渲染 1.2项目创建 1.vue create 名称 2.运行后 3.下载vuex。采用的是基于vue2的版本。 npm install vuex3 --save 4.vue项目采用的是npm run serve 的运行的方式 1.3配置方式 1.src下创建index.js用于配置store import Vuex from vuex
import Vue from vue
Vue.use(Vuex)// 创建Vuex对象
const store new Vuex.Store({//简单数据 保存的全局状态变量state: {count: 1,app: Vuex的学习},// 改变数据mutations: {}
// 导出vuex
export default store
// 如果想使用的话必须去main.js中进行引用2.main.js设置 import Vue from vue
import App from ./App.vue
import store from ./store/indexVue.config.productionTip falsenew Vue({render: h h(App),store
}).$mount(#app) 1.4获取数据的方式 1.$store.state.名称 获取的是全部的状态变量 2.采用导入的方式 //mapState讲store中的state映射到计算属性
import { mapState } from vuex;需要在计算属性中进行获取store中的数据 一种是()中直接写[]可以起别名采用{}的形式 // 计算属性computed: {// 写法1...mapState([count, app]),// 写法2...mapState({c: count, //相当于给count起了一个别名a: app}),}3.界面展示 !-- 第一种方式 --div获取store的第一种方式{{ $store.state.count }}/divdiv获取store的第二种方式{{ app }}{{ count }}br{{ c }}{{ a }}/div 4.效果图 2.进阶 直接上代码简单点用即可 1.store/index.js中导入了一个product的store自定义模块 import Vuex from vuex
import Vue from vue
import product from ./product
Vue.use(Vuex)// 创建Vuex对象
const store new Vuex.Store({//简单数据 保存的全局状态变量state: {count: 1,app: Vuex的学习},// 改变数据mutations: { }, // 复杂数据当保存的是复杂的数据的时候// 一个单独的模块每一个模块中的actionmutation和state都需要全部重新写modules: {// 采用模块引入的方式product,}
})
// 导出vuex
export default store
// 如果想使用的话必须去main.js中进行引用2.子模块数据 export default// product是自定义的命名空间名称{namespaced: true,//全局数据state: {list: [1, 2, 3, 4, 5]}, //同步 改变数据mutations: {addList(state, payload) { //state是当前模块的数据(表示调用的时候传入的参数),payload是参数state.list.push(payload)}},// 异步改变数据不建议actions: {addList2(context, payload) { //state是当前模块的数据(表示调用的时候传入的参数),payload是参数// context.state.list.push(payload) //保存的信息不会被记录下来context.commit(addList, payload) //可以被追踪到 }} } 3.界面引用 templatediv!-- 第一种方式 --div获取store的第一种方式{{ $store.state.count }}/divdiv获取store的第二种方式{{ app }}{{ count }}br{{ c }}{{ a }}/div!-- 获取不同模块中的数据 --div获取不同模块中的数据{{ list }}/div!--同步 改变状态变量中的数据 --divinput typetext keyup.enteraddClick placeholder回车确认信息 v-modelvalue/div!-- 异步 改变状态变量中的数据 --divinput typetext keyup.enteraddClick2 placeholder回车确认信息 v-modelvalue2/div!-- 异步 改变状态变量中的数据 --divinput typetext keyup.enteraddClick3 placeholder回车确认信息 v-modelvalue3/div/div
/templatescript
//mapState讲store中的state映射到计算属性
import { mapState } from vuex;
// mapMutations将store中的方法映射到methods
import { mapMutations } from vuex;
// mapActions把vuex中的actions映射到methods
import { mapActions } from vuex;
export default {name: helloWorld,// 数据data() {return {value: ,value2: ,value3: }},// 方法methods: {...mapMutations(product,//声明的命名空间[addList] //命名空间store中的方法),...mapActions(product,//声明的命名空间[addList2] //命名空间store中的方法),//同步改变数据addClick() {// console.log(this.value); //打印测试信息this.addList(this.value) //直接调用mutation中的方法},//异步改变数据addClick2() {this.addList2(this.value2)},//直接写addClick3() {//采用/的方式指定命名空间this.$store.commit(product/addList, this.value3)}},// 计算属性computed: {// 写法1...mapState([count, app]),// 写法2...mapState({c: count, //相当于给count起了一个别名a: app}),// 导入别的模块中的数据...mapState(product, //命名空间名称[list] //state状态变量中的数据)}
}
/scriptstyle/style4.效果图 3.注意点 state中保存的是全局的数据 改变state中的数据推荐使用的是mapMutations改变的数据会被记录而且界面会时时的刷新和显示 mapActions采用的是异步的方式不会留下记录的 而且在定义的时候改变数据的方式mutations是state的方式而actions的是context的方式 1.注意点 导入 //mapState讲store中的state映射到计算属性
import { mapState } from vuex;
// mapMutations将store中的方法映射到methods
import { mapMutations } from vuex;
// mapActions把vuex中的actions映射到methods
import { mapActions } from vuex;获取 // 计算属性computed: {// 写法1...mapState([count, app]),// 写法2...mapState({c: count, //相当于给count起了一个别名a: app}),// 导入别的模块中的数据...mapState(product, //命名空间名称[list] //state状态变量中的数据)}// 方法methods: {...mapMutations(product,//声明的命名空间[addList] //命名空间store中的方法),...mapActions(product,//声明的命名空间[addList2] //命名空间store中的方法),........
}
