3.求和案列_Vuex
(1).初始化状态
安装vuex: 如果是vue2那么就要安装下面的vue@3
假如安装的不是这个版本就会发现:不存在$store
npm install vuex@3
- 搭建环境
- 我们引入vue目的是为了使用Vue.use()。引入我们刚才下载的vuex。然后应用Vuex。再然后创建store。最后抛出 store。
store.js
import Vue from 'vue' // 目的是调用: use() import Vuex from 'vuex' // 引入插件vuex Vue.use(Vuex) // 应用Vuex // TODO: 创建Store 用于管理: state对象、mutations对象 const store=new Vuex.Store() // TODO: 抛出store export default store
- 我们这里的任务需要引入vuex。然后利用使用store.js创建的store。
main.js
import Vue from 'vue' // 引入阉割版本的vue import App from './App.vue' // 引入App.vue组件 import store from './vuex/store' // 引入vuex Vue.config.productionTip = false; new Vue({ store: store, // TODO: 这里只有当我们应用了vuex才会被Vue自动管理。 --> store.js--->Vue.use() render: h => h(App) }).$mount('#app');
查看组件的vc
2.初始化状态
App.vue
<template> <div> <Count/> </div> </template> <script> import Count from './components/Count.vue' export default { name:'App', components:{ Count, } } </script> <style> </style>
store.js
就是初始化变量 // 初始化状态->需要写成一个对象,要管理n多个组件的状态 const state_jsxs = { sum: 0, } 就是响应的操作 // 创建一个actions，值为一个对象,包含n个响应组件"动作"的函数 const actions_jsxs = { jia(a, b) { console.log(a, b); } } 传送到我们创建的store。 且下面的两个属性不能变。固定的 // TODO: 创建Store 用于管理: state对象、mutations对象 const store = new Vuex.Store({ state: state_jsxs, actions: actions_jsxs })
import Vue from 'vue' // 目的是调用: use() import Vuex from 'vuex' // 引入插件vuex Vue.use(Vuex) // 应用Vuex // 初始化状态->需要写成一个对象,要管理n多个组件的状态 const state_jsxs = { sum: 0, } // 创建一个actions，值为一个对象,包含n个响应组件"动作"的函数 const actions_jsxs = { jia(a, b) { console.log(a, b); } } // TODO: 创建Store 用于管理: state对象、mutations对象 const store = new Vuex.Store({ state: state_jsxs, actions: actions_jsxs }) // TODO: 抛出store export default store
main.js
import Vue from 'vue' // 引入阉割版本的vue import App from './App.vue' // 引入App.vue组件 import store from './vuex/store' // 引入vuex Vue.config.productionTip = false; const vm=new Vue({ store: store, // TODO: 这里只有当我们应用了vuex才会被Vue自动管理。 --> store.js--->Vue.use() render: h => h(App) }).$mount('#app'); console.log('vm',vm)
count.vue
获取$store中我们存的数据 <h2>当前求和未: {{ $store.state.sum }}</h2>
<template> <div> <h2>当前求和未: {{ $store.state.sum }}</h2> <!-- v-model.number意思是: 我们接受到的数据是数值 --> <select name="" id="" v-model.number="n"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select> <button @click="increment">+</button> <button >-</button> <button >奇数再加</button> <button >异步加</button> </div> </template> <script> export default { name: "Count", data() { return { n: 1, // }; }, methods: { increment() { this.sum += this.n; }, }, mounted() { console.log('vc',this) }, }; </script> <style> </style>
(2).操作状态
App.vue
<template> <div> <Count/> </div> </template> <script> import Count from './components/Count.vue' export default { name:'App', components:{ Count, } } </script> <style> </style>
store.js
1.设置状态 2.设置响应 3.设置加工状态
import Vue from 'vue' // 目的是调用: use() import Vuex from 'vuex' // 引入插件vuex Vue.use(Vuex) // 应用Vuex // 初始化状态->需要写成一个对象,要管理n多个组件的状态 const state_jsxs = { sum: 0, } // 创建一个actions，值为一个对象,包含n个响应组件"动作"的函数---> 可以拿到分发的值 const actions_jsxs = { jia(context, value) { // context 是一个迷你版的$store。我们要用context.commit()去通知mutations加工状态。 value是分发传递的值 context.commit('JIA_jsxs',value); // 通知mutations去 console.log(context, value); }, Async_jia(context,value){ setTimeout(() =>{ context.commit('Async_jsxs',value); },500) }, describe_jia(context,value){ context.commit('describe_jsxs',value); }, incrementOdd_jia(context,value){ context.commit('incrementOdd_jsxs',value); } } // 加工状态: 这里可以拿到状态设定的值 const mutations_jsxs={ JIA_jsxs(state_1,value){ // Todo: 这里的第一个参数是是一个对象里面可以获取state状态(),value是分发传递的值 state_1.sum+=value }, Async_jsxs(state_2,value){ state_2.sum+=value }, describe_jsxs(state_3,value){ state_3.sum-=value }, incrementOdd_jsxs(state_4,value){ if(state_4.sum%2){ state_4.sum+=value; } } } // TODO: 创建Store 用于管理: state对象、mutations对象 const store = new Vuex.Store({ state: state_jsxs, actions: actions_jsxs, mutations:mutations_jsxs }) // TODO: 抛出store export default store
main.js
1. 传入 $store • 1
import Vue from 'vue' // 引入阉割版本的vue import App from './App.vue' // 引入App.vue组件 import store from './vuex/store' // 引入vuex Vue.config.productionTip = false; const vm=new Vue({ store: store, // TODO: 这里只有当我们应用了vuex才会被Vue自动管理。 --> store.js--->Vue.use() render: h => h(App) }).$mount('#app'); console.log('vm',vm)
count.vue
1. 设置分发
<template> <div> <h2>当前求和未: {{ $store.state.sum }}</h2> <!-- v-model.number意思是: 我们接受到的数据是数值 --> <select name="" id="" v-model.number="n"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select> <button @click="increment">+</button> <button @click="describe">-</button> <button @click="incrementOdd">奇数再加</button> <button @click="incrementAsyn">异步加</button> </div> </template> <script> export default { name: "Count", data() { return { n: 1, // }; }, methods: { increment() { this.$store.dispatch('jia',this.n) }, incrementAsyn(){ this.$store.dispatch('Async_jia',this.n) }, describe(){ this.$store.dispatch('describe_jia',this.n) }, incrementOdd(){ this.$store.dispatch('incrementOdd_jia',this.n) } }, mounted() { console.log('vc',this) }, }; </script> <style> </style>
4.求和案列_Vuex的getters
我们的vc管理的store中有一个getters
(1).Vuex的getters类似于 Vue的computed
<template> <div> <Count/> </div> </template> <script> import Count from './components/Count.vue' export default { name:'App', components:{ Count, } } </script> <style> </style>
store.js
// getters中配置的是state经过加工后的值--- 类似于Vue中的computed const getters_jsxs = { // TODO: 必须需要是返回值 demo(state_5, value) { // 第一个参数是: $state。第二个参数是传递过来的值。 return state_5.sum*100 } } // TODO: 创建Store 用于管理: state对象、mutations对象 const store = new Vuex.Store({ state: state_jsxs, actions: actions_jsxs, mutations: mutations_jsxs, getters:getters_jsxs })
import Vue from 'vue' // 目的是调用: use() import Vuex from 'vuex' // 引入插件vuex Vue.use(Vuex) // 应用Vuex // 初始化状态->需要写成一个对象,要管理n多个组件的状态 const state_jsxs = { sum: 0, } // 创建一个actions，值为一个对象,包含n个响应组件"动作"的函数---> 可以拿到分发的值 const actions_jsxs = { jia(context, value) { // context 是一个迷你版的$store。我们要用context.commit()去通知mutations加工状态。 value是分发传递的值 context.commit('JIA_jsxs', value); // 通知mutations去 console.log(context, value); }, Async_jia(context, value) { setTimeout(() => { context.commit('Async_jsxs', value); }, 500) }, describe_jia(context, value) { context.commit('describe_jsxs', value); }, incrementOdd_jia(context, value) { context.commit('incrementOdd_jsxs', value); }, } // 加工状态: 这里可以拿到状态设定的值 const mutations_jsxs = { JIA_jsxs(state_1, value) { // Todo: 这里的第一个参数是是一个对象里面可以获取state状态(),value是分发传递的值 state_1.sum += value }, Async_jsxs(state_2, value) { state_2.sum += value }, describe_jsxs(state_3, value) { state_3.sum -= value }, incrementOdd_jsxs(state_4, value) { if (state_4.sum % 2) { state_4.sum += value; } } } // getters中配置的是state经过加工后的值--- 类似于Vue中的computed const getters_jsxs = { // TODO: 必须需要是返回值 demo(state_5, value) { // 第一个参数是: $state。第二个参数是传递过来的值。 return state_5.sum*100 } } // TODO: 创建Store 用于管理: state对象、mutations对象 const store = new Vuex.Store({ state: state_jsxs, actions: actions_jsxs, mutations: mutations_jsxs, getters:getters_jsxs }) // TODO: 抛出store export default store
Count.vue
<h2>乘以100之后: {{$store.getters.demo}}</h2>
<template> <div> <h2>当前求和未: {{ $store.state.sum }}</h2> <h2>乘以100之后: {{$store.getters.demo}}</h2> <!-- v-model.number意思是: 我们接受到的数据是数值 --> <select name="" id="" v-model.number="n"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select> <button @click="increment">+</button> <button @click="describe">-</button> <button @click="incrementOdd">奇数再加</button> <button @click="incrementAsyn">异步加</button> </div> </template> <script> export default { name: "Count", data() { return { n: 1, // }; }, methods: { increment() { this.$store.dispatch('jia',this.n) }, incrementAsyn(){ this.$store.dispatch('Async_jia',this.n) }, describe(){ this.$store.dispatch('describe_jia',this.n) }, incrementOdd(){ this.$store.dispatch('incrementOdd_jia',this.n) } }, mounted() { console.log('vc',this) }, }; </script> <style> </style>
我们要注意的是: 这里的 getters的一个对象。里面的的对象需要时函数。并且getters和state是同级的，
结果
5.求和案列_Vuex中的mapSteat和mapGetters
我们的的count.vue调用总和的的时候很麻烦，我们想办法优化一下
(1).靠自己写优化
<h2>当前求和未: {{ sum }}</h2> <h2>乘以100之后: {{beiSum}}</h2> computed:{ // 自己计算属性: 靠state sum(){ return this.$store.state.sum }, // 自己计算属性: 靠getters beiSum(){ return this.$store.getters.demo } },
<template> <div> <h2>当前求和未: {{ sum }}</h2> <h2>乘以100之后: {{beiSum}}</h2> <!-- v-model.number意思是: 我们接受到的数据是数值 --> <select name="" id="" v-model.number="n"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select> <button @click="increment">+</button> <button @click="describe">-</button> <button @click="incrementOdd">奇数再加</button> <button @click="incrementAsyn">异步加</button> </div> </template> <script> export default { name: "Count", data() { return { n: 1, // }; }, computed:{ // mapState生成计算属性 // 自己计算属性 sum(){ return this.$store.state.sum }, beiSum(){ return this.$store.getters.demo } }, methods: { increment() { this.$store.dispatch('jia',this.n) }, incrementAsyn(){ this.$store.dispatch('Async_jia',this.n) }, describe(){ this.$store.dispatch('describe_jia',this.n) }, incrementOdd(){ this.$store.dispatch('incrementOdd_jia',this.n) } }, mounted() { console.log('vc',this) }, }; </script> <style> </style>
(2). 利用mapState和mapGetter
main.js
// 初始化状态->需要写成一个对象,要管理n多个组件的状态 const state_jsxs = { sum: 0, name: 'jsxs' } // getters中配置的是state经过加工后的值--- 类似于Vue中的computed const getters_jsxs = { // TODO: 必须需要是返回值 demo(state_5, value) { // 第一个参数是: $state。第二个参数是传递过来的值。 return state_5.sum*100 } }
import Vue from 'vue' // 引入阉割版本的vue import App from './App.vue' // 引入App.vue组件 import store from './vuex/store' // 引入vuex Vue.config.productionTip = false; const vm=new Vue({ store: store, // TODO: 这里只有当我们应用了vuex才会被Vue自动管理。 --> store.js--->Vue.use() render: h => h(App) }).$mount('#app'); console.log('vm',vm)
store.js
import Vue from 'vue' // 目的是调用: use() import Vuex from 'vuex' // 引入插件vuex Vue.use(Vuex) // 应用Vuex // 初始化状态->需要写成一个对象,要管理n多个组件的状态 const state_jsxs = { sum: 0, name: 'jsxs' } // 创建一个actions，值为一个对象,包含n个响应组件"动作"的函数---> 可以拿到分发的值 const actions_jsxs = { jia(context, value) { // context 是一个迷你版的$store。我们要用context.commit()去通知mutations加工状态。 value是分发传递的值 context.commit('JIA_jsxs', value); // 通知mutations去 console.log(context, value); }, Async_jia(context, value) { setTimeout(() => { context.commit('Async_jsxs', value); }, 500) }, describe_jia(context, value) { context.commit('describe_jsxs', value); }, incrementOdd_jia(context, value) { context.commit('incrementOdd_jsxs', value); }, } // 加工状态: 这里可以拿到状态设定的值 const mutations_jsxs = { JIA_jsxs(state_1, value) { // Todo: 这里的第一个参数是是一个对象里面可以获取state状态(),value是分发传递的值 state_1.sum += value }, Async_jsxs(state_2, value) { state_2.sum += value }, describe_jsxs(state_3, value) { state_3.sum -= value }, incrementOdd_jsxs(state_4, value) { if (state_4.sum % 2) { state_4.sum += value; } } } // getters中配置的是state经过加工后的值--- 类似于Vue中的computed const getters_jsxs = { // TODO: 必须需要是返回值 demo(state_5, value) { // 第一个参数是: $state。第二个参数是传递过来的值。 return state_5.sum*100 } } // TODO: 创建Store 用于管理: state对象、mutations对象 const store = new Vuex.Store({ state: state_jsxs, actions: actions_jsxs, mutations: mutations_jsxs, getters:getters_jsxs }) // TODO: 抛出store export default store
Count.vue
<h2>当前求和未: {{ sum_t }}</h2> <h2>乘以100之后: {{beiSum}}</h2> <h2>名字是: {{usernames}}</h2> // Todo: 这里需要使用到{} import {mapGetters, mapState} from 'vuex' computed:{ // 为什么要用三个点，目的是把mapState给摊开。为什么要摊开，因为不能有 { {} } ...mapState({ sum_t:'sum', // 第一个是现在页面调用的，第二个是store区域的state usernames:'name' }), ...mapGetters({ beiSum:'demo' //第一个参数是现在页面调用的,第二个是getters区域的 }) },
<template> <div> <h2>当前求和未: {{ sum_t }}</h2> <h2>乘以100之后: {{beiSum}}</h2> <h2>名字是: {{usernames}}</h2> <!-- v-model.number意思是: 我们接受到的数据是数值 --> <select name="" id="" v-model.number="n"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select> <button @click="increment">+</button> <button @click="describe">-</button> <button @click="incrementOdd">奇数再加</button> <button @click="incrementAsyn">异步加</button> </div> </template> <script> // Todo: 这里需要使用到{} import {mapGetters, mapState} from 'vuex' export default { name: "Count", data() { return { n: 1, // }; }, computed:{ // 为什么要用三个点，目的是把mapState给摊开。为什么要摊开，因为不能有 { {} } ...mapState({ sum_t:'sum', usernames:'name' }), ...mapGetters({ beiSum:'demo' }) }, methods: { increment() { this.$store.dispatch('jia',this.n) }, incrementAsyn(){ this.$store.dispatch('Async_jia',this.n) }, describe(){ this.$store.dispatch('describe_jia',this.n) }, incrementOdd(){ this.$store.dispatch('incrementOdd_jia',this.n) } }, }; </script> <style> </style>
