Vuex使用

vuex的安装
 

首先,vuex分3.x版本和4.x版本,分别对应vue2.0与3.0
也就是说,vue2.0只能安装vuex3.x版本,最高3.6.2,vue3.0才能装vuex4.x版本

安装最新版本

直接安装会安装最新版本（4.x）

npm i vuex --save

安装指定版本

npm i vuex@3.6.2 --save

目录结构

 使用Vuex

1.main.js中引入Vuex

import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store/index'

Vue.config.productionTip = false



/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,
  render: h => h(App)
})

2.创建store/index.js

import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
//应用Vuex插件
Vue.use(Vuex)

const store = new Vuex.Store({
  state:{//存放公共数据
   counter:1000,
   book:[
     {name:'php',price:10},
     {name:'mysql',price:20},
     {name:'lua',price:30},
     {name:'java',price:40},
     {name:'python',price:50}
   ],
   info:{
     name:'hahah',
     age : 30
   }
  },
  mutations:{   //操作state数据的方法
    incr(state){
      state.counter++
    },
    decr(state){
       state.counter--
    },
    summent(state, value){
      //方法1
      // state.counter += value

      //方法2
      console.log(value)//{type: "summent", val: 10, age: 20}
     state.counter += value.val
    },
    addbook(state, book){
      state.book.push(book)
    },
    updateInfo(state){
      Vue.set(state.info,'adder','武汉')//会新增adder属性
      Vue.delete(state.info,'age')
    },
    updateSyncInfo(state){

      setTimeout(()=>{
          state.info.name = 'updateinfo'
      },1000)
    }
  },
  actions:{ //action中用来定义异步的一些方法
    asyncUpdateInfo(context, payload){
      console.log(payload)
      setTimeout(()=>{
        context.commit("updateSyncInfo")
      },1000)
    }

  },

  getters:{//类似计算属性
    sum(state){
      return state.counter * 2
    },
    more30book(state){//返回价格大于30的书籍
      return state.book.filter((v => v.price >= 30))
    },
    more30booklength(state, getters){//
      return getters.more30book.length
    },
    gt20price(state){
      // return function(price){
      //   return state.book.filter((v => v.price >= price))
      // }
      return price => {
        return state.book.filter((v => v.price >= price))
      }
    }

  },
  modules:{ //可以将多个store分成一个一个的模块

      a:{  //会把a放入上面中的state中  {{this.$store.state.a}}
        state : {
          name : 'modules模块'
        },
        mutations : {
          updateModule(state, payload){
            console.log(payload)
            state.name = '修改modules success'
          },
          AupdateName(state, payload){
            state.name = payload
          }
        },
        actions : {
          asyncActionsCounter(context, val){  //commith会提交给当前模块中的AupdateName
            setTimeout(()=>{
              context.commit('AupdateName',val)
            }, 1000)
          }
        },
        getters : {
          fullname(state){
            return state.name + '--getters 使用'
          },
          fullname2(state, getters, rootState){
              return getters.fullname + '-----' +  rootState.counter
          }

        }
      },
      b:{
        state : {},
        mutations : {},
        actions : {},
        getters : {}
      }

  }



})


//导出

export default store

3.Vue模板中使用

<template>
  <div id="app">
      <h1> {{this.$store.state.counter}}</h1>
      <button @click="jiajia">++</button>
      <button @click="jianjian">--</button>
      <button @click="jianValue(10)">加10</button>
       <button @click="addbook">添加书籍</button>

      <h2>store共享数据：   {{this.$store.getters.sum}}</h2>

     <h3>大于30的数据的个数：{{this.$store.getters.more30booklength}}</h3>
      {{this.$store.getters.more30book}}

      <h3>大于20的数据</h3>
      {{this.$store.getters.gt20price(20)}}
      <hr>
      <h3>修改info数据</h3>
      <button @click="updateInfo">修改</button>

      <button @click="asyncUpdate">异步修改</button>
      {{this.$store.state.info}}

      <h3>使用模块数据</h3>
      <p> {{this.$store.state.a.name}}</p>
      <button @click="updateModule">修改模块数据</button>
        <p>{{this.$store.getters.fullname}}</p>
         <p>{{this.$store.getters.fullname2}}</p>
      <button @click="asyncActionsCounter">异步修改模块数据</button>


  </div>
</template>

<script>

  export default {
    name: 'test',
    data(){
      return{

      }
    },
    methods:{
      jiajia(){
        this.$store.commit('incr')
      },
      jianjian(){
        this.$store.commit('decr')
      },
      jianValue(val){
        // 方法1
         // this.$store.commit('summent',val)
       // 方法2
          this.$store.commit({
            type:"summent",
            val,
            age:20
          })
      },
      addbook(){
        const book = {name:'C++', price:60}
        this.$store.commit('addbook',book)
      },
      updateInfo(){
         this.$store.commit('updateInfo')
      },
      asyncUpdate(){
        this.$store.dispatch('asyncUpdateInfo','异步修改')
      },
      updateModule(){
         this.$store.commit('updateModule','模块数据')
      },
      asyncActionsCounter(){
         this.$store.dispatch('asyncActionsCounter','异步actions')
      }

    },

  }
</script>

<style>
</style>

结果