下载vuex
npm install vuex --save
创建store-index.js文件
import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex);
const store = new Vuex.Store({
// 定义变量 存储数据
state: {},
// 进行加工 处理成新的数据
getters: {},
// 操作数据
mutations: {},
// 异步操作数据
actions: {},
});
export default store
main.js中引入vuex
使用vuex
state
相当与data,定义变量,存储数据,供全局使用。
定义state
组件中使用state
方法1: this.$store.state.全局数据名称
方法2:导入mapState (常用)
方法3: {{$store.state.name}}
getters
对state的数据进行加工,处理成新的数据
定义getters
使用getters
方法1: this.$store.getters.定义的方法
方法2:导入mapGetters
进行了到这里,你已经可以对值进行读取操作了。原生值为’state‘ 修饰值为’getters‘
接下来进行值的修改。
mutations
修改state里面的值
定义mutations
使用mutations
方法1:直接使用
方法2: 导入mapMutations
Mutations里面的函数必须是同步操作,不能包含异步操作!
actions
实现异步操作
定义actions
使用actions
方法1:this.$store.dispatch('方法名称')
方法2:导入 mapActions
进行到这里,vuex的基本内容学习完毕,不算太大型的项目,按照这些操作是没问题的。但是我们可以发现,不管是数据存储,还是修改数据,都放在了一个文件里,这样操作是不方便的。
因此接下来学习模块拆分。
也就是再新建四个文件夹,划分每个属性模块
按属性进行拆分
index.js
state.js
getters.js
mutations.js
actions.js
使用的方法还是如上那些,拆分之后并不造成影响。