vue create app_vuex
cd app_vuex
npm install
2 安装vuexnpm install vuex --save-dev
3 在src目录下创建一个store目录 在里面创建一个 index.js ，并在main.js文件中进行配置index.js中写入
import Vuex from 'vuex'
import Vue from 'vue'
Vue.use(Vuex);
main.js中写入
import Vue from 'vue'
import App from './App.vue'
import store from './store/index' // 配置store
Vue.config.productionTip = false
new Vue({
store,//配置 store 选项，指定为 store 对象，会自动将 store 对象注入到所有子组件中，在子组件中通过 this.$store 访问该 store 对象
render: h => h(App),
}).$mount('#app')
4 编辑index.js文件const store = new Vuex.Store({
state:{
count:9
}
})
export default store;
tip：使用vuex的时候，我们需要明白几个概念，以及怎样使用，使用的优点
1.6个概念： store（基本的概念，创建一个数据仓库）；state （数据）；getters（功能类似计算属性）；mutations；actions；modules
2.优点：使用vuex 当项目中的数据很多，并且在多个页面使用，可以动态更改数据，多个页面都会有变化。并且store里面的数据不能直接修改
3.过程：
① Vue Components 是我们的 vue 组件，组件会触发（dispatch）一些事件或动作，也就是 Actions； ② 我们在组件中发出的动作，肯定是想获取或者改变数据的，但是在 vuex 中，数据是集中管理的，我们不能直接去更改数据，所以会把这个动作提交（Commit）到 Mutations 中； ③ 然后 Mutations 就去改变（Mutate）State 中的数据； ④ 当 State 中的数据被改变之后，就会重新渲染（Render）到 Vue Components 中去，组件展示更新后的数据，完成一个流程。
5.在app.vue文件中引入 <template> <div id="app"> <img alt="Vue logo" src="./assets/logo.png"> <p>{{count}}</p> </div> </template> <script> export default { name: 'app', computed:{ count(){ return this.$store.state.count } } } </script> <style> #app { font-family: 'Avenir', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } </style>index.js文件添加一个mutations就可以
const store = new Vuex.Store({ state:{ count:9 }, mutations:{ add(state){ state.count++; }, jian(state){ state.count--; } } })app.vue文件中直接调用就可以了
<template> <div id="app"> <img alt="Vue logo" src="./assets/logo.png"> <!-- <HelloWorld msg="Welcome to Your Vue.js App"/> --> <p>{{count}}</p> <div> <button @click="add">+</button> <button @click="jian">-</button> </div> </div> </template> <script> export default { name: 'app', computed:{ count(){ return this.$store.state.count } }, methods:{ add(){ this.$store.commit('add') }, jian(){ this.$store.commit('jian') } } } </script>也可以通过mapState 控制多个数据，传递的时候可以作为一个数组的形式传递；
例如：在index.js文件中，定义多个数据，在app.vue文件中添加代码
<template> <div id="app"> <img alt="Vue logo" src="./assets/logo.png"> <p>{{count}}{{num1}}{{num2}}</p> <div> <button @click="add">+</button> <button @click="jian">-</button> </div> </div> </template> <script> import { mapState } from 'vuex' export default { name: 'app', // computed:{ // count(){ // return this.$store.state.count // } // }, computed:mapState(['count' ,'num1' ,'num2']), methods:{ add(){ this.$store.commit('add') }, jian(){ this.$store.commit('jian') } } } </script>二、也可以用vuex 提供的 mapGetters 和 mapActions 来访问
1. mapGetters 用来获取属性（数据）
app.vue文件中引入 mapGetters
import {mapGetters } from 'vuex'
然后再计算属性中调用mapGetters 的辅助方法，并传入一个数组
computed:{
...mapGetters(['count' ,'num1' ,'num2'])
},
2.getters 用来获取属性
index.js文件中写入
getters:{ count(state){ return state.count }, num1(state){ return state.num1 }, num2(state){ return state.num2 } }此时，页面中的数据才会被传过来
3.通过动作来改变数据
actions 定义方法（动作）,可以使异步的发送请求。
commit 提交变化，修改数据的唯一方式就是显示的提交 mutations
mutations 定义变化，处理状态（数据）的改变
index.js文件中写入
// // 定义 actions ，要执行的动作，如流程的判断、异步请求 actions:{ add({commit}){ //提交一个名为 add 的变化，名字可自定义，可以认为是类型名，与下方 mutations 中的 add 对应 //commit 提交变化，修改数据的唯一方式就是显式的提交 mutations commit('add') }, jian({commit}){ commit('jian') } }app.vue中先引入mapActions
import {mapActions } from 'vuex'
然后再methods后面 调用mapActions辅助方法，传入一个数组
methods:{
...mapActions(['add','jian'])
}
也可以直接用 this.$store.dispatch（"add"）;
如果需要对应的数据的时候，可以使用 this.$store.dispatch（"add",res.data.data）
参考文章链接：https://www.cnblogs.com/yaowen/p/8927343.html
https://www.jb51.net/article/123703.htm
