在vue项目中引用vuex状态管理工具

一、vuex是什么？

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。

二、使用步骤

1.引入库

代码如下（示例）：

npm install vuex --save-dev

2.在main.js文件引入配置

代码如下（示例）：

import Vue from 'vue'
import App from './App'
import router from './router'
import ElementUI from "element-ui";
import "element-ui/lib/theme-chalk/index.css";
import store from './store'

Vue.use(ElementUI);

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: '<App/>'
})

3.配置store/index.js文件

import Vue from "vue"
import Vuex from "vuex"

Vue.use(Vuex)

const store = new Vuex.Store({
  state:{
    type: '',
  },
  getters:{
    getType:function (state) {
      if(!state.type){
        state.type = localStorage.getItem('type')
      }
      return state.type;
    }
  },
  mutations:{
    //格式：类型(名字)+处理函数
    //加1
    changetype(state,type) {
      //console.log(state)//state对象
      state.type = type;
    }
  },
  actions:{
   /* increment({commit}){
      commit("INCREMENT")
    }*/
  }
})

export default store

4.获取state数据

// 在computed计算属性中获取state数据方式
// index.js文件中
import Vuex from 'vuex'

export default Vuex.createStore({
  state: {
    count1: 1,
  },
});

// 1.
// 将store全局注入到根部
this.$store.state.count

// 2.
// 使用mapstate，将state映射到mapstate
// 在mapstate中
import { mapState } from 'vuex'
computed: {
  // 使用对象展开运算符将此对象混入到外部对象中
  ...mapState(['count'])
}

5.获取getter数据

目的是在获取数据前将vuex中的state数据过滤
getter接收state作为参数

// index.js文件中
// getter接收参数 state， 是整个状态state值
import Vuex from 'vuex'

export default Vuex.createStore({
  state: {
    count1: 1,
  },
  getters: {
    doneTodos1: state => {
      return state.count1
    },
  },
});

// 1.
this.$store.getters.count

// 2.
...mapGetters(['count'])

// 3.在vue3.0版本的项目中使用computed属性
// 需要引入computed函数和userStore函数
import { useStore } from "vuex";
import { computed } from "vue";

setup() {
const store = useStore();
const doneTodos1 = computed(() => store.getters.doneTodos1);
}

6.使用vuex中的方法修改state状态

// index.js文件中
// mutation中接收参数，第一个参数是整个 state状态， 第二个参数是调用该方法时传入的参数
import Vuex from 'vuex'

export default Vuex.createStore({
  state: {
    count1: 1,
  },
  mutations: {
    increment(state, n) {
      state.count += n
    }
  },
});

// 1.
this.$store.muatations.commit('increment', n)

// 2.在methods属性中展开映射
...mapMutations(['increment'])

// 3.在vue3.0版本的项目中使用computed属性
// 需要引入computed函数和userStore函数
import { useStore } from "vuex";
import { computed } from "vue";

setup() {
const store = useStore();
const increment = (n = 2) => store.commit("increment", n);
}

render() {
return (
<button class="button" onClick={() => this.increment(3)}>
  按钮
</button>
)
}

7.使用action异步操作mutation修改state状态

// index.js文件中
// action接收一个对象参数context，解构赋值为{ commit }, 后面的参数是调用方法时传入的参数
import Vuex from 'vuex'

export default Vuex.createStore({
  state: {
    count1: 1,
  },
  mutations: {
    increment(state, n) {
      state.count += n
    }
  },
  actions: {
    increment(context, n) {
      // context.commit('increment')
      return new Promise((resolve, reject) => {
	      setTimeout(() => {
	        context.commit('increment', n)
	        resolve()
	      }, 1000)
      })
    }
  },
});

// 1.
this.$store.dispatch('increment')

// 2.在methods属性中展开映射
...mapActions(['increment'])

// 3.在vue3.0版本的项目中使用computed属性
// 需要引入computed函数和userStore函数
import { useStore } from "vuex";
import { computed } from "vue";

setup() {
const store = useStore();
const asyncIncrement = (n = 2) => store.dispatch("increment", n);
}

render() {
return (
<button class="button" onClick={() => this.asyncIncrement(3)}>
  异步按钮
</button>
)
}

8.使用modules将vuex状态管理工具分模块

// index.js文件中
// 创建的store存储状态modules中有的，使用方法没有区别
import Vuex from 'vuex'

const info = {
  state: {
    count1: 1,
    count2: 2,
    count3: 3,
    todos: [
      { id: 1, text: 'abc', done: true },
      { id: 2, text: '阿伯茨', done: false }
    ]
  },
  getters: {
    doneTodos1: state => {
      return state.todos.filter(todo => todo.done)
    },
    doneTodos2: (state) => (id) => {
      return state.todos.find(todo => todo.id === id)
    }
  },
  mutations: {
    increment(state, n) {
      state.count2 += n
    }
  },
  actions: {
    increment(context, n) {
      // context.commit('increment')
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          context.commit('increment', n)
          resolve()
        }, 1000)
      })
    }
  },
}

export default Vuex.createStore({
  modules: {
    info: info
  }
});

GitHub地址，点击下载
链接: https://github.com/NotBerlin/html-login/tree/dev_services_login-html.

总结

good morning