Vuex学习总结（一）

Vuex入门操作看这篇够了

官方图片

• Vuex是什么？
  • Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 （官方的说法）
  • Vuex就是存储多个组件共用的数据信息的（个人理解）
• 安装

npm install vuex --save

正式开始请一步一步操作将会完成Vuex入门

• 新建文件引入vuex
  • 步骤一
    • 在src下新建store文件夹，store文件夹里新建index.js文件
    • 如图所示
      
  • 步骤二
    • index.js中添如下代码

import Vue from 'vue'  //引入vue
import Vuex from 'vuex' //引入vuex

Vue.use(Vuex) //使用Vuex

export default new Vuex.Store({//new Vuex中的Store对象用于实现Vuex的功能（注意在new 该对象时必须先进行Vue.use(Vuex)）
  state: {//用于存放组件需要共享的数据
  },
  mutations: {//用于操作state对象中的数据
  },
  actions: {//处理请求数据的逻辑处理结束后调用commit调用mutations里的方法
  },
  modules: {//用于模块化管理不同业务存储的数据信息
  }
})

• 第三步
  • 将state文件引入到main.js中代码如下（只看注解部分即可）

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

Vue.config.productionTip = false

new Vue({
  store,//2.将store放入Vue中
  render: h => h(App)
}).$mount('#app')

至此以上步骤将vuex整合到vue中完成
如何用vuex实现组件间数据共享请继续往下看，我将用代码+注解的方式说明

//store中index.js文件(下文将用store文件代替该文件夹名称)
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {//存放共享的数据
  	sum:0//1.state中添加需要共享的数据
  },
  actions: {
  	//2.过滤或处理传进的数据
  	jia(context,value){//这可以接收两个数据，context（上下文对象），value（我们实际调用传递的数据）
		//该方法用于将传递进来的数据加上state中sum的数据
		context.commit("JIA",value)//通过commit调用mutations的方法将传入数据和state中sum相加
	}
  },
  mutations: {
  	//3.操作state对象中的数据
  	JIA(state,value){//该方法可以接收两个数据，第一个为state对象，第二个位传递的值
		state.sum += value//将传输数据相加
	}
  },
  modules: {
  }
})

//组件中调用方法去修改state中的数据
<script>
    export default {
        name:'Count',
        data(){
            return{
               
            }
        },
        methods:{
            jia(){//该方法为点击事件触发
                this.$store.dispatch("jia",4)//调用vuex中actions方法名为jia的方法并传入4
                console.log(this.$store.state.sum)//调用结束将sum值打印到控制台
            }
        }
    }
</script>

整体流程为在store文件中创建组件需要共享的数据，并定义好操作该数据的方法，然后各组件通过操作$store来实现数据共享