vue2项目之vuex初体验

前言：

初次尝试使用vuex,记录在vue2项目中如何使用vuex进行数据管理，以便日后温习。 vue2项目中，要使用vuex的3版本；vue3项目中，要使用vuex的4版本。该文没有记录安装vuex的步骤，是因为在创建项目的时候选择了vuex选择项。

使用步骤：

1.在根目录下创建store文件夹，并创建index.js文件（基本结构如下）

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

//1. state用于存放数据
const state = {}
// 2.getter用于state中数据加工
const getters = {}
// 3.mutations用于操作数据
const mutations = {}
// 4.actions用于响应组件中的动作
const actions = {}
// 创建并暴露store
export default new Vuex.Store({
  state,
  getters,
  mutations,
  actions
})

2.在main.js文件中引入store对象并进行挂载

3.在组件中进行使用。

Demo演示：

1.创建index.js文件

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

//1. state用于存放数据
const state = {
  name: 'LeeYUFan',
  sex: '男',
  age: 20 //周岁
}
// 2.getter用于state中数据加工
const getters = {
  nominalAge(state) {
    return state.age + 1
  }
}
// 3.mutations用于操作数据
const mutations = {
  // 修改姓名
  updateName(state, val) {
    console.log(state, val)
    state.name = val
  },
  // 修改性别
  updateSex(state, val) {
    state.sex = val
  },
  updateAge(state,val){
    state.age = val
  }
}
// 4.actions用于响应组件中的动作
const actions = {
  // 两秒之后进行性别的修改
  delayUpdateSex(content, val) {
    // 直接通过改变state中的数据
    // content.state.sex = val

    // 通过调用mutations对象中的函数对state中的数据进行操作
    setTimeout(() => {
      content.commit('updateSex', val)
      console.log('我是3秒后才执行的函数')
    }, 3000)
  }
}
// 创建并暴露store
export default new Vuex.Store({
  state,
  getters,
  mutations,
  actions
})

2.在main.js文件中引入store对象

import Vue from 'vue'
import App from './App.vue'
import router from './router'
// 引入store
import store from './store'

Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

3.在组件中进行使用。

测试： 在main.js文件中进行引入并挂载后，在组件中输出this,结果如下：(每个组件实例上都包含着Store对象)

每个Store对象又包含四个重要的属性： （图中的三个还有一个未截在图中的state对象属性）

在组件中使用：

<template>
  <div id="app">
    <HelloWorld></HelloWorld>
    <!-- 读取store中数据 -->
    <h4>姓名：{{this.$store.state.name}}</h4>
    <h5>性别：{{this.$store.state.sex}}</h5>
    <h5>周岁：{{this.$store.state.age}}</h5>
    <h5>虚岁：{{nominalAge}}</h5>
    <button @click="updateName">修改姓名</button>
    <button @click="updateSex">修改性别</button>
    <button @click="updateAge">修改年龄</button>
    <button @click="delayUpdateSex">异步修改呢性别</button>
  </div>
</template>
<script>
  import HelloWorld from './components/HelloWorld.vue'
  export default{
    components:{
      HelloWorld
    },
    mounted(){
      console.log(this,'App中输出this>>>>>>>>>>>>>>>')
    },
    computed:{
      // 虚岁
      nominalAge(){
        this.$store.getters.nominalAge
      }
    },
    methods:{
      // 修改store中数据
      updateName(){
        this.$store.commit('updateName','李玉帆')
      },
      // 修改性别
      updateSex(){
        this.$store.commit('updateSex','女')
      },
      // 修改年龄
      updateAge(){
        this.$store.commit('updateAge',21)
      },
      // 异步进行性别修改
      delayUpdateSex(){
        this.$store.dispatch('delayUpdateSex','Female')
      }
    }
  }
</script>

借助辅助函数在组件中使用：

<template>
  <div id="app">
    <HelloWorld></HelloWorld>
    <!-- 读取store中数据 -->
    <h4>姓名：{{name}}</h4>
    <h5>性别：{{sex}}</h5>
    <h5>周岁：{{age}}</h5>
    <h5>虚岁：{{age1}}</h5>
    <button @click="updateName('李玉帆')">修改姓名</button>
    <button @click="updateSex('女')">修改性别</button>
    <button @click="updateAge(21)">修改年龄</button>
    <button @click="delayUpdateSex('Female')">异步修改呢性别</button>
  </div>
</template>
<script>
  import HelloWorld from './components/HelloWorld.vue'
  import { mapGetters, mapState ,mapMutations,mapActions} from 'vuex'
  export default{
    components:{
      HelloWorld
    },
    mounted(){
      console.log(this,'App中输出this>>>>>>>>>>>>>>>')
    },
    computed:{
      // 借助mapState生成计算属性 ---- 对象的写法
      ...mapState({name:'name',sex:'sex',age:'age'}),
      // 借助mapGetters生成计算属性  ---- 对象的写法
      ...mapGetters({age1:'nominalAge'}),


      // 数组的写法 (键名和值相同时支持数组的写法)
      // ...mapState(['name','sex','age'])
    },
    methods:{
      ...mapMutations(['updateName','updateSex','updateAge']),
     
      ...mapActions(['delayUpdateSex'])
    }
  }
</script>

注意：

1.借助辅助函数时，如要写成数组的形式，需要保证组件中方法名字和index.js文件中方法的名字是一致的。

2.使用辅助函数进行传参

3.借助辅助函数读取state中的数据等同于

4.通过actions对象中的方法直接操作state是可以进行的，但是通过vue调试者工具不可以观察到数据的变化。