vue2 中 vuex的使用

目录文件夹是脚手架 默认生成

 

index.ts 文件 代码 导入Vue  Vuex 然后使用  Vue.use(Vuex)  导出  new Vuex.Store Store对象

import Vue from 'vue'
import Vuex from 'vuex'
import catStore from './car/cat'
// 使用Vuex
Vue.use(Vuex)
// 导出 store对象
export default new Vuex.Store({
  state: {
  },
  getters: {
  },
  mutations: {
  },
  actions: {
  },
  modules: {
    catStore
  }
})

　　

new Vue({
  router,  // 注入路由，这使得Vue应用有了页面路由跳转的功能
  store,   // 注入Vuex store，这使得Vue应用有了全局状态管理的功能
  render: h => h(App) // 使用render函数渲染一个Vue组件（在这里是App组件），这是Vue 2.x中推荐的做法，特别是在使用Vue Router和Vuex时
}).$mount('#app') // 手动挂载Vue实例到DOM元素上，这里的'#app'是一个id选择器，意味着Vue实例会被挂载到页面上id为'app'的元素内

　　

下面定义 一个  Module  模块方式 的 carstore   Module<ICarStore, any>

import type { Module } from 'vuex'

interface ICarStore{
Name:string
Age:number
}

const carStore: Module<ICarStore, any> = {
  namespaced: true,
  state: {
    Name: '',
    Age: 10
  },
  mutations: {
    setName (state, payload) {
      state.Name = payload
    },
    setAge (state, payload) {
      state.Age = payload
    }
  },
  getters: {
    getName: state => state.Name,
    getAge: state => state.Age
  },
  actions: {
    setNameAsync ({ commit }, payload) {
      commit('setName', payload)
    },
    setAgeAsync ({ commit }, payload) {
      commit('setAge', payload)
    }
  }
}

export default carStore

将 carStore 导出后 添加到 index.js 中 也就是 主store文件中

import Vue from 'vue'
import Vuex from 'vuex'
import carStore from './car/car'
// 使用Vuex
Vue.use(Vuex)
// 导出 store对象
export default new Vuex.Store({
  state: {
  },
  getters: {
  },
  mutations: {
  },
  actions: {
  },
  modules: {
    car: carStore
  }
})

　　

最后是使用 store

import { mapActions, mapGetters, mapState, mapMutations } from 'vuex' 辅助函数

<template>
  <div>
    <h2>vue2 选项式风格</h2>
    <div>
      <label for="">年龄</label> <span> {{ age }}</span>
    </div>
    <div>
      <label for="">姓名</label> <span>  {{ name }}</span>
    </div>
    <div>
      <h2>Vuex计算属性中的值</h2>
      <div>
        <label for="">年龄</label> <span> {{ carAge }}</span>
      </div>
      <div>
        <label for="">姓名</label> <span>  {{ carName }}</span>
      </div>
    </div>
    <div>
      <h2>使用this.$store.state.catStore 方式获取 </h2>
      <div>
        <label for="">年龄</label> <span> {{ this.$store.state.car.Age }}</span>
      </div>
      <div>
        <label for="">姓名</label> <span>  {{ this.$store.state.car.Name  }}</span>
      </div>
    </div>
    <div>
      <h2>同步设置姓名</h2>
      <div>
        <label for="">姓名</label> <input type="text" v-model.trim="name">
      </div>
      <div>
      <label for="">年龄</label>   <input type="text" v-model.number="age">
      </div>
      <button @click="setNameClick">点击同步设置姓名</button>
      <button @click="setAgeClick">点击同步设置年龄</button>
    </div>
  </div>
</template>

<script >
import { mapActions, mapGetters, mapState, mapMutations } from 'vuex'

export default {
  data () {
    return {
      name: '',
      age: 0
    }
  },
  computed: {

    ...mapState({
      carName: (state) => state.car.Name, // 注意这里可能需要调整以匹配您的模块注册名
      carAge: (state) => state.car.Age
    }),
    ...mapGetters('car', ['getName', 'getAge'])
  },
  methods: {
    ...mapActions('car', ['setNameAsync', 'setAgeAsync']),
    ...mapMutations('car', ['setName', 'setAge']),
    setNameClick () {
      this.setName(this.name)
      // this.$store.commit('catStore/setName', this.name)
      // this.$store.dispatch('catStore/setAgeAsync', this.age)
    },
    setAgeClick () {
      this.setAge(this.age)
      // this.$store.commit('catStore/setAge', this.age)
    }
  }
}
</script>

<style lang="scss" scoped>

</style>

　　

可以使用  调用

this.$store.commit('catStore/setName', this.name)
this.$store.dispatch('catStore/setAgeAsync', this.age)
this.$store.commit('catStore/setAge', this.age)
this.$store.state.car.Age 

　　

也可以使用 辅助函数 调用  如上图 中  使用 展开运算符 ... 将对象中属性展开

...mapState({
      carName: (state) => state.car.Name, // 注意这里可能需要调整以匹配您的模块注册名
      carAge: (state) => state.car.Age
    }),