Vuex原理图安装使用 store 求和案例 mapState 与 mapGetters 使用 mapMutatio

原理图

安装

注意：
vue2只能使用vuex3版本
vue3只能使用vuex4版本
所以要在vue2中安装vuex
npm i vuex@3

使用

在main.js中使用
import Vue from 'vue'
import App from './App.vue'
import router from './router'


//引入store 
import store from './store'


//创建vm使用vuex,router
new Vue({
  el: "#app",
  render: (h) => h(App),
  store,
  router,
});

store

1.在src下新建store文件夹内新建index.js文件
//该文件用于创建vuex中最为核心的store

// 引入vue
import Vue from 'vue'

//引入vuex
import Vuex from 'vuex'

//使用vuex

Vue.use(Vuex);

//准备actions---用于响应组件中的动作值是一个object对象
const actions = {}

//准备mutation---用于操作数据（state）值是一个object对象
const mutations = {}

//准备state---用于存储数据（state）值是一个object对象
const state = {}

//创建并对外暴露store实例对象
export default new Vuex.Store({
  actions,
  mutations,
  state,
});

求和案例

//Count.vue 组件内配置
 methods: {
    increase(){
    this.$store.commit('JIA',this.n)
    },
    decrease(){
    this.$store.commit('JIAN',this.n)
    },
    increaseOdd(){
    this.$store.dispatch('jiaOdd',this.n)
    },
    increaseWait(){
      this.$store.dispatch('jiaWait',this.n)
    }
  },
  
//store/index.js配置
export default new Vuex.Store({
  //准备state---用于存储数据--对象
  state: {
    sum: 0, //当前求和
  },
  //用于操作state中的数据--对象
  mutations: {
   JIA(state,value){
    // console.log('mutation中的JIA被调用了',a,b)
    state.sum += value
   },
   JIAN(state,value){
    state.sum -= value
   },
  },
  //用于响应组件中的动作
  actions: {
    jiaOdd(context,value){
      //  console.log('jiaOdd',context)
      if(context.state.sum % 2){
      context.commit('JIA', value)
      }
    },
    jiaWait(context,value){
      setTimeout(() => {
        context.commit('JIA',value)
      }, 1000);
    }
  },
  getters: {},
  modules: {},
});

mapState 与 mapGetters 使用

<template>
  <div>
    <h2>当前求和为:{{sum}}</h2>
    <h1>当前求得放大10倍为:{{bigSum}}</h1>
    <h2>我是: {{name}} 我的爱好是: {{hobbit}}</h2>
    <select v-model.number="n">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
    </select>
    <button @click="increase">+</button>
    <button @click="decrease">-</button>
    <button @click="increaseOdd">和为奇数再加</button>
    <button @click="increaseWait">等一会再加</button>
  </div>
</template>

<script>
// 引入mapState
import {mapState,mapGetters} from 'vuex'
export default {
  name: 'Count',
  data() {
    return {
      n:1 //用户选择的数字
    }
  },
  computed:{
    //使用mapState生成计算属性，从state中读取数据(对象写法)
    //  ...mapState({total:'sum',compellation:'name',interest:'hobbit'})
    
    //使用mapState生成计算属性，从state中读取数据(数组写法)
   ...mapState(['sum','name','hobbit']),
   
   //使用mapGetters生成计算属性 从getters中读取数据(数组写法)
   ...mapGetters(['bigSum'])
  },
};
</script>

mapMutations() 和 mapActions() 使用

<template>
  <div>
    <h2>当前求和为:{{sum}}</h2>
    <h1>当前求得放大10倍为:{{bigSum}}</h1>
    <h2>我是: {{name}} 我的爱好是: {{hobbit}}</h2>
    <select v-model.number="n">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
    </select>
    <button @click="increase(n)">+</button>
    <button @click="decrease(n)">-</button>
    <button @click="increaseOdd(n)">和为奇数再加</button>
    <button @click="increaseWait(n)">等一会再加</button>
  </div>
</template>

<script>
// 引入mapState
import {mapState,mapGetters,mapMutations,mapActions} from 'vuex'
export default {
  name: 'Count',
  data() {
    return {
      n:1 //用户选择的数字
    }
  },
  methods: {
    //使用mapMutations 调用commit 生成对应的方法 （对象写法） 
    ...mapMutations({increase:'JIA',decrease:'JIAN'}),

    //使用mapMutations 生成对应的方法 按钮绑定的事件方法名也要改成JIA(n) JIAN(n)（数组写法） 
    // ...mapMutations(['JIA','JIAN']),
   
   /*************************** */
   
    //使用mapActions()调用 dispatch生成对应的方法 （对象写法）
    ...mapActions({increaseOdd:'jiaOdd',increaseWait:'jiaWait'}),
    
     //使用mapActions()调用 dispatch生成对应的方法 按钮绑定的事件方法名也要改成jiaOdd(n) jiaWait(n)（数组写法）
    // ...mapActions({['jiaOdd','jiaWait']),

  },
};
</script>

备注

mapMutations()和mapActions() 若需要传递参数 则需要再模板绑定事件时传递好参数否则参数为event
    <button @click="increase(n)">+</button>
    <button @click="decrease(n)">-</button>
    <button @click="increaseOdd(n)">和为奇数再加</button>
    <button @click="increaseWait(n)">等一会再加</button>

多组件共享数据

通过mapState读取存储在state的数据在页面上呈现

webStoreage


1.存储内容大小---一般为5MB左右 
2.浏览器通过 Window.sessionStoreage 和 Window.locationStoreage属性来实现本地存储机制

2.相关API

    存储 该方法接收一个键值对均为字符类型作为参数 存储到location或location中
    location/sessionStoreage.setItem('key','value'),
    
    读取 该方法接收一个键名 作为参数 返回对应键名的值
    location/sessionStoreage.getItem('person'),
    
    删除 该方法接收一个键名作为参数 并把该键名从存储中删除
    location/sessionStoreage.removeItem('person'),
    
    清空 该方法会清空存储中所有的数据
    location/sessionStoreage.clear(),
    

3.备注
1. sessionStoreage中存储的内容会随着浏览器窗口的关闭而消失
2. locationStoreage中存储的的数据需要手动清除才会消失
3. location/sessionStoreage.getItem('person') 如果找不到对应键名的值 则返回 null
4. JSON.stringify({XXXX})将对象类型转换为字符串 JSON.parse() 方法将数据转换为 JavaScript 对象
5.JSON.parse(Null)的结果依旧是null