第一:安装vuex
npm i vuex
第二:创建vuex
1.在src文件夹下创建文件夹store
2.在store文件夹下创建js文件(一般名称为index,可自定义)
3.在index.js文件里创建vuex 代码如下:
import Vue from 'vue //引入vue
import Vuex from 'vuex' //引入vuex
Vue.use(Vuex)
const V = {
namespaced:true //必须开启
state: {},
mutations: {},
actions: {}
}
export default new Vuex.Store({
modules:{ V:V }
})
补充:共享的数据写在state里、修改数据的方法写在actions(actions一般用于ajax请求后处理数据或者特殊的业务逻辑) 和mutations (mutations一般为操作state数据的函数),其中actions通过commit方法对mutations 里的方法调用。
例子 ==》给n的值+vaule[实现n+(1或2或····)]:
const V = {
namespaced:true,
state: {n:0},
actions: {
add:function(context,vaule){ context.commit("ADD",vaule)}
},
mutations: {
ADD:function(state,vaule){ state.n +=vaule //实际对n进行操作 }
},
}
export default new Vuex.Store({
modules:{ V:V }
})
第三:引入并且关联vuex
1.在main.js中 import Vuex from "./store/index"
2.在new Vue中添加属性 ===》 store:Vuex
第四:使用共享的数据、更改共享数据
用法一(普通用法):
1.this.$store.dispatch("V/add",value) //add为你在actions 中定义的函数名,value为数据。此操作是改变共享的数据。
2.this.$store.commit("V/ADD",value) //ADD为你在mutations 中定义的函数名,value为数据。此操作是改变共享的数据。
3.获取共享数据:
this.$store.state.V.n //n为你在state中定义的数据名
4.页面使用共享数据:
{{$store.state.V.n}} //n为你在state中定义的数据名
用法二(通过mapState 创建共享数据计算属性):
1.在需要使用共享数据的组件中导入mapState ==》import {mapState} from "vuex"
2.在computed中使用mapState ==》
computed:{
...mapState("V",{
x:"n" //x为自定义计算属性名,n为共享数据的名称。
····· //可以有多个计算属性
})
}
3.页面引用 {{x}} //x为上述自定义属性名
补充:1.如果mapState的计算属性名与共享数据名一致时可以用:···mapState("V",["n"]).通过传递数组生成计算属性。页面使用:{{n}}。2.actions和mutations的调用也可以通过mapActions和mapMutations,用法类似。推介使用数组方式。